Display inline chart values

6 thoughts on “Display inline chart values”

1. There’s a sample that shows how to do this for bars: https://github.com/chartjs/Chart.js/blob/master/samples/data_label_combo-bar-line.html

2. @blomdahldaniel it seems that setting the following option solves the flickering issue :

   options: {
       hover: {
           animationDuration: 0
       }
   }

3. @arth1992 Hiding the values when the dataset is hidden can be done via the code below. (I altered the example from http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js a little bit)

   {options:{
       animation: {
         onProgress: drawBarValues,
         onComplete: drawBarValues
       },
       hover: { animationDuration: 0 }
   }}
   

   function drawBarValues()
   {
     // render the value of the chart above the bar
     var ctx = this.chart.ctx;
     ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
     ctx.fillStyle = this.chart.config.options.defaultFontColor;
     ctx.textAlign = 'center';
     ctx.textBaseline = 'bottom';
     this.data.datasets.forEach(function (dataset) {
       for (var i = 0; i < dataset.data.length; i++) {
         if(dataset.hidden === true && dataset._meta[Object.keys(dataset._meta)[0]].hidden !== false){ continue; }
         var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
         if(dataset.data[i] !== null){
           ctx.fillText(dataset.data[i], model.x - 1, model.y - 5);
         }
       }
     });
   }

   The problem I have is that the values are drawn over the tooltip. Is there a way to alter the draw order to make sure the values are drawn before the tooltip is drawn?

4. Same question as @MarijnMensinga as well. I’d like to show the tooltip and the values of the bars but I can’t find a way to draw the values behind the tooltip.
   

5. Closing since there is now a plugin that implements these features: chartjs-plugin-datalabels:

   • bar example
   • line example
   • all examples

Comments are closed.