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) {
        chartLabels.push(val.TIMERANGE);
        chartData.push(val.COUNT);      // <--- This is what I want to display on each bar
    });
    var ctx = document.getElementById("rtChart").getContext("2d");

    if (chartRespTime)
        chartRespTime.destroy();

    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(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                    ctx.textAlign = 'left';
                    ctx.textBaseline = 'bottom';

                    this.data.datasets.forEach(function (dataset) {
                        for (var i = 0; i < dataset.data.length; 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
        }
    });
    //console.log(ctx);
    $('#rtChart').show();
}

Answer

There is no build in way to do this, but there is a verry good plugin that achieves what you want: the datalabels plugin https://chartjs-plugin-datalabels.netlify.app/samples/charts/bar.html