[Chartjs]-Display Bar chart values in the graph – ChartJS

by

4👍

✅

For the datalabels plugin to work you need to install it and register it:

Bundler:

npm install chartjs-plugin-datalabels

import Chart from 'chart.js/auto';
import ChartDataLabels from 'chartjs-plugin-datalabels';

Chart.register(ChartDataLabels);

Script tag:

<script src="https://cdn.jsdelivr.net/npm/chart.js@3/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>

Chart.register(ChartDataLabels);

3👍

Please take a look at below runnable code and see how it can be done with chartjs-plugin-datalabels.

Chart.register(ChartDataLabels);
new Chart("barChart", {
  type: 'bar',
  data: {
    labels: ['A', 'B', 'C', 'D'],
    datasets: [{
      label: 'Data',
      data: [5, 8, 24, 14],
      backgroundColor: 'rgb(124, 124, 255)',
      barPercentage: 0.5
    }]
  },
  options: {
    plugins: {
      datalabels: {
        color: 'white',
        font: {
          weight: 'bold'
        }
      }
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.7.1/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<canvas id="barChart"></canvas>

0👍

Remove datalabels: "center" and anchor: "center"

Leave a comment