[Chartjs]-Values above points – chart.js

by

6👍

✅

Yes, there is a possibility 🙂

However, there’s no built-in functionality for this in ChartJS as of now. You would rather have to create a chart plugin.

ᴘʟᴜɢɪɴ

plugins: [{
   afterDatasetsDraw: function(chart) {
      var ctx = chart.ctx;
      chart.data.datasets.forEach(function(dataset, index) {
         var datasetMeta = chart.getDatasetMeta(index);
         if (datasetMeta.hidden) return;
         datasetMeta.data.forEach(function(point, index) {
            var value = dataset.data[index],
                x = point.getCenterPoint().x,
                y = point.getCenterPoint().y,
                radius = point._model.radius,
                fontSize = 14,
                fontFamily = 'Verdana',
                fontColor = 'black',
                fontStyle = 'normal';
            ctx.save();
            ctx.textBaseline = 'middle';
            ctx.textAlign = 'center';
            ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
            ctx.fillStyle = fontColor;
            ctx.fillText(value, x, y - radius - fontSize);
            ctx.restore();
         });
      });
   }
}]

* add this followed by your chart options.

ᴡᴏʀᴋɪɴɢ ᴇxᴀᴍᴘʟᴇ ⧩

var chart = new Chart(ctx, {
   type: 'line',
   data: {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
      datasets: [{
         label: 'LINE 1',
         data: [3, 1, 4, 2, 5],
         backgroundColor: 'rgba(0, 119, 290, 0.5)',
         borderColor: 'rgba(0, 119, 290, 0.6)',
         fill: false
      }, {
         label: 'LINE 2',
         data: [2, 4, 1, 5, 3],
         backgroundColor: 'rgba(233, 30, 99, 0.5)',
         borderColor: 'rgba(233, 30, 99, 0.6)',
         fill: false
      }]
   },
   options: {
      scales: {
         yAxes: [{
            ticks: {
               beginAtZero: true,
               max: 7
            }
         }]
      }
   },
   plugins: [{
      afterDatasetsDraw: function(chart) {
         var ctx = chart.ctx;
         chart.data.datasets.forEach(function(dataset, index) {
            var datasetMeta = chart.getDatasetMeta(index);
            if (datasetMeta.hidden) return;
            datasetMeta.data.forEach(function(point, index) {
               var value = dataset.data[index],
                   x = point.getCenterPoint().x,
                   y = point.getCenterPoint().y,
                   radius = point._model.radius,
                   fontSize = 14,
                   fontFamily = 'Verdana',
                   fontColor = 'black',
                   fontStyle = 'normal';
               ctx.save();
               ctx.textBaseline = 'middle';
               ctx.textAlign = 'center';
               ctx.font = fontStyle + ' ' + fontSize + 'px' + ' ' + fontFamily;
               ctx.fillStyle = fontColor;
               ctx.fillText(value, x, y - radius - fontSize);
               ctx.restore();
            });
         });
      }
   }]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<canvas id="ctx"></canvas>

Leave a comment