Chart.js: Display inline chart values

[caioaugustofr]

Hello,

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?

[ghost]

I would like to see an example of this as well. I've tried a few variations on the methods suggested here: http://stackoverflow.com/questions/31631354/how-to-display-data-values-on-chart-js , but have not had any luck making them work with Chart.js 2

Thanks.

[etimberg]

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

[ghost]

I tried adding the animation block to the config options, but I get the following error:

Uncaught TypeError: chartInstance.controller.getDatasetMeta is not a function

Any ideas?

On May 11, 2016, at 11:11 AM, Evert Timberg [email protected] wrote:

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

—
You are receiving this because you commented.
Reply to this email directly or view it on GitHub

[etimberg]

@metatribal you need chart.js >= 2.1.0

[ghost]

Ok. I will update and try again this evening. Thanks!
On May 11, 2016 12:56 PM, "Evert Timberg" [email protected] wrote:

@metatribal https://github.com/metatribal you need chart.js >= 2.1.0

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
https://github.com/chartjs/Chart.js/issues/2477#issuecomment-218555454

[ionutvilie]

hi, i have tried the sample code and it works for the initial display but If I start to hide bar's from the legend, the values remain in the chart and it looks not so good. :)
sample code is also affected.

[blomdahldaniel]

For me, in Chrome, the values flickers when I hover any element. Looks pretty bad..?

And how can I change the color of the text?

[antoinewdg]

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

options: {
    hover: {
        animationDuration: 0
    }
}

[blomdahldaniel]

@antoinewdg Awesome! Any idéa about how to change the text-color?

[antoinewdg]

@blomdahldaniel changing something like ctx.fillStyle in the onComplete hook should do the trick.

[blomdahldaniel]

@antoinewdg thank you!

[nesbtesh]

Have you guys figured out how display the inline values for the bar chart?

[Sabyasachi18]

@etimberg..I saw the example data_label_combo-bar-line.html...But I want to display the data values at the vertical center of each bar. Could you please help me to do this??

[arth1992]

@blomdahldaniel Your hook did the work but the problem is when we enable/disable the legend the values does not get hide. Is there any solution for this ?

[MarijnMensinga]

@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?

[sunlee-newyork]

Same question as @MarijnMensinga - I've been playing around with various callbacks (to no avail) to figure out how to alter the canvas layers so that a tooltip (on hover) is drawn over the values (instead of the other way around).

[rafaelchampion]

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.

[Nomia]

@etimberg why can you just make this feature as a built-in feature of your lib, make it an option?

I see lots of request and search/answer on this feature

[etimberg]

@Nomia we haven't done this in the core library because we're trying to balance between features and library size. We already get complaints about how big Chart.js is to download and adding a lot of big features will make that occur more.

Further, we ship samples that show how to do this with a simple plugin and there are so many possible use cases that we can't support them all. I think it's easier for developers to create a custom plugin that works for their needs rather than providing a ton of different options

[Nomia]

plug in is good. thx

[buckelieg]

Link https://github.com/chartjs/Chart.js/blob/master/samples/data_label_combo-bar-line.html is broken :(

[etimberg]

@buckelieg see http://www.chartjs.org/samples/latest/advanced/data-labelling.html or https://github.com/chartjs/chartjs-plugin-datalabels

[simonbrunel]

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

• bar example
• line example
• all examples