chart.js-datalabels-plugins don't work

Question

I'm trying to use chartjs-datalabels-plugin to show values on the chart. but I can't make it work on jsfiddle

Here's my code

<div class="graph">
  <div class="chart-legend">

  </div>
  <div class="chart">
    <canvas id="myChart" height = 60></canvas>
  </div>
</div>

I import chartjs-datalabels-plugin in jsfiddle and then in options I enable the display option to true. but no value is shown in the chart.

var ctx = $('#myChart');

ctx.height(100);
var myChart = new Chart(ctx, {
    ....
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
                        color: 'black',
                        display: true,
                        font: {
                            weight: 'bold'
                        },
                        formatter: Math.round
                    }
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

Answer 1

Datalabels plugin requires Chart.js 2.7.0 or later.

In your fiddle you used 2.4.0 version.

var ctx = $('#myChart');
ctx.height(100);
var myChart = new Chart(ctx, {
    type: 'horizontalBar',
    data: {
        height: 200,
        labels: ["Red"],
        datasets: [{
                label: '# of Votes',
                data: [12],
                backgroundColor: [
                    '#F4B266',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            },
            {
                label: '# of Votes',
                data: [18],
                backgroundColor: [
                    '#AEB7B2',
                    'rgba(54, 162, 235, 0.2)',
                    'rgba(255, 206, 86, 0.2)',
                    'rgba(75, 192, 192, 0.2)',
                    'rgba(153, 102, 255, 0.2)',
                    'rgba(255, 159, 64, 0.2)'
                ],
                borderWidth: 1
            }
        ]
    },
    maintainAspectRatio: false,
    options: {
        plugins: {
            datalabels: {
						color: 'black',
						display: function(context) {
							return context.dataset.data[context.dataIndex] > 15;
						},
						font: {
							weight: 'bold'
						},
						formatter: Math.round
					}
        },
        legend: {
            display: false
        },
        maintainAspectRatio: false,

        scales: {
            yAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                },
                barThickness: 9

            }],
            xAxes: [{
                stacked: true,

                gridLines: {
                    display: false,
                    drawBorder: false,

                },
                ticks: {
                    beginAtZero: true,
                    suggestedMax: 100,
                    display: false

                },
                barThickness: 9

            }]
        }
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="graph">
  <div class="chart-legend">
  </div>
  <div class="chart">
    <canvas id="myChart" height = 60></canvas>
  </div>
</div>