Add value to horizontal bar in chart.js

I have been looking around for a way to add the value inside each bar in a horizontal bar chart, using chart.js but all posts seem to show how to add the label. Tooltip shows both label and value but I wanted to show the value so users can see the result without having to mouse-over the bar.

I put break points in the script to see if there is any property of “model” that contains the value but couldn’t find one.

This is how I set up the chart including the animation section that shows the label instead of the value.

Dataset comes from an ajax call and chart is displayed in its onSuccess:

function OnSuccess_(response) {
    var jResult = JSON.parse(response.d);
    var chartLabels = [];
    var chartData = []

    $.each(jResult, function (index, val) {
        chartData.push(val.COUNT);      // <--- This is what I want to display on each bar
    var ctx = document.getElementById("rtChart").getContext("2d");

    if (chartRespTime)

    chartRespTime = new Chart(ctx, {
        type: 'horizontalBar',
        data: {
            labels: chartLabels,
            datasets: [{
                label: "Response Time (ms)",
                backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f", "#e8c3b9", "#c45850"],
                data: chartData
        options: {
            title: {
                display: true,
                text: 'Database Response Time (milli-seconds)'
            scales: {
                xAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Count'
                    ticks: {
                        major: {
                            fontStyle: 'bold',
                            fontColor: '#FF0000'
                yAxes: [{
                    display: true,
                    scaleLabel: {
                        display: true,
                        labelString: 'Response Time (ms)'
            animation: {
                onComplete: function () {
                    var ctx = this.chart.ctx;
                    ctx.font = Chart.helpers.fontString(, 'normal',;
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'bottom';

           (dataset) {
                        for (var i = 0; i <; i++) {
                            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model,
                                left  = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left;
                            ctx.fillStyle = '#444'; // label color
                            var label = model.label;   // <--- need value not label
                            ctx.fillText(label, left + 15, model.y + 8);
            maintainAspectRatio: false,
            responsive: true,
            showInlineValues: true,
            centeredInllineValues: true,
            tooltipCaretSize: 0


There is no build in way to do this, but there is a verry good plugin that achieves what you want: the datalabels plugin