Datalabels not showing on Chart.js

Question

I am trying to display the total amount at the top of my chart.js; I'm trying to use the datalabel plugin but I'm not sure why it is not showing the labels, I don't get any errors, here's my code:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
var ctx = document.getElementById('myChart');
Chart.register(ChartDataLabels);
Chart.defaults.set('plugins.datalabels', {
  color: '#FE777B'
});
var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
        datasets: [{
            data: <?php print_r($barData); ?>,
            label: 'Advisor Closed MTD',
            backgroundColor: 'rgb(192,111,94)',
            barThickness: 25,
            datalabels: {
                color: '#FFCE56'
            }
            
        }],
    },
    options: {
        responsive: false,
        plugins: {
            datalabels: {
                color: 'blue'
            }
        }
    }
});
</script>

The chart shows the right information but the labels are not showing at all.

score 6 · Accepted Answer · answered May 18 '21 at 20:07

The labels are showing, they are in the bars itself, to show them on top of the bars you will need to configure it like so:

options: {
      responsive: false,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }

Example:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0-rc"></script>
<canvas id="myChart" width="850" height="520"></canvas>
<script>
  var ctx = document.getElementById('myChart');
  Chart.register(ChartDataLabels);
  Chart.defaults.set('plugins.datalabels', {
    color: '#FE777B'
  });
  var myChart = new Chart(ctx, {
    type: 'bar',
    plugins: [ChartDataLabels],
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        data: [12, 19, 3, 5, 2, 3],
        label: 'Advisor Closed MTD',
        backgroundColor: 'rgb(192,111,94)',
        barThickness: 25,
        datalabels: {
          color: '#FFCE56'
        }

      }],
    },
    options: {
      responsive: false,
      plugins: {
        datalabels: {
          anchor: 'end',
          align: 'end',
          labels: {
            value: {
              color: 'blue'
            }
          }

        }
      }
    }
  });

</script>

that makes sense! so I think my actual problem is how I send the data, I see you added the labels and I'm just sending a json to the data, here's an example of what I use: { Greg: 67800, Jed: 9800, Jeremy: 96200, } — Riquelmy Melara, May 18 '21 at 20:15
That is not a valid input unless you do more configuration in the options see: https://www.chartjs.org/docs/master/general/data-structures.html — LeeLenalee, May 18 '21 at 20:27
The essential element is: Chart.register(ChartDataLabels); Without it, nothing will happen. — DanimalReks, Nov 09 '22 at 18:50

Datalabels not showing on Chart.js

1 Answers1