[Chartjs]-Can't display data labels in chartJS

by

2👍

As stated in the documentation you will need to have at least Chart.js version 2.7.0 installed, you are currently using 2.3.0.

After that you either have to register the plugin globally by calling Chart.plugins.register(ChartDataLabels); so all the charts have the datalabels or register it locally to the chart you want the labels for as shown in the example below:

const options = {
  type: 'bar',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderWidth: 1
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderWidth: 1
      }
    ]
  },
  options: {
    scales: {
      yAxes: [{
        ticks: {
          reverse: false
        }
      }]
    }
  },
  plugins: [ChartDataLabels]
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
new Chart(ctx, options);
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@1.0.0"></script>
</body>

Leave a comment