Display inline chart values


What I want is what is mentioned on #770 , but for charts v2.

I have a bar chart and I would like to display the data value inside the bar, without the need to roll the mouse over.

I also have a line chart, with big point size, and I would like to display it’s value inside the point. So, what I want is a chart like that:


Is there a way to do that?

Author: Fantashit

6 thoughts on “Display inline chart values

  1. @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)

        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?

Comments are closed.