Chart.js: How to add data point labels in Bar charts

[ghost]

Hi, I want to show the actual value of the bar above the bar using bar charts. How can I do this?

[oreporan]

YES! I want to know this also

[ghost]

Hi oreporan, I modified the chart.js and added the following code in the function

function drawBars(animPc)

just update this function

//updated function function drawBars(animPc) { ctx.lineWidth = config.barStrokeWidth; for (var i = 0; i < data.datasets.length; i++) { for (var j = 0; j < data.datasets[i].data.length; j++) { var barOffset = yAxisPosX + config.barValueSpacing + valueHop * j + barWidth * i + config.barDatasetSpacing * i + config.barStrokeWidth * i; //moved these properties to inside the loop ctx.fillStyle = data.datasets[i].fillColor; ctx.strokeStyle = data.datasets[i].strokeColor; ctx.beginPath(); ctx.moveTo(barOffset, xAxisPosY); ctx.lineTo(barOffset, xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2)); ctx.lineTo(barOffset + barWidth, xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2)); ctx.lineTo(barOffset + barWidth, xAxisPosY); if (config.barShowStroke) { ctx.stroke(); } ctx.closePath(); //added code to show data labels in the bar chart //you can add more config properties to remove these hardcoded values ctx.fill(); ctx.fillStyle = '#FF3030'; ctx.font = 'bold 12pt '+config.scaleFontFamily; ctx.fillText(data.datasets[i].data[j], barOffset + (barWidth / 2), xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2) - 12); ctx.restore(); } } }

[oreporan]

THanks man

[oreporan]

Hey - Unfortunately its not working for me :(
I updated the function and no go

[ghost]

Give your Email Id, I will mail you my file... you can compare the contents

[oreporan]

Hi - this is my email.
[email protected]
Thank you !

On 9 במרץ 2014, at 07:18, jayantvarshney018 [email protected] wrote:

Give your Email Id, I will mail you my file... you can compare the contents

—
Reply to this email directly or view it on GitHub.

[mihaicris]

Thanks a lot!
is this project abandoned? ;(

[mihaicris]

There is a problem with the label alignment of the first value (bar) from the left, it is a little to the right (when j = 0)
This seems to correct but I don't think is the right way.
ctx.fillText(
data.datasets[i].data[j],
barOffset + (barWidth / 2) + (!j ? barOffset / 8 : 0 ),
xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2) - 12);

[kshyju]

I forked the original repo to add this feature. check it out. https://github.com/kshyju/Chart.js

[mihaicris]

Thanks a lot, very nice!
but one issue in your fork...
If I put barLabelFontSize: 8, (in default options of bar) then
ctx.font = fontSize+"pt"; in function drawBarText.. doesn't update the font size of the label.

doesn't work for me...

[mauricio82]

I just change a little bit to centralize the label text.

ctx.fillText(data.datasets[i].data[j], barOffset + (barWidth - ctx.measureText(data.datasets[i].data[j]).width) / 2 + (!j ? barOffset / 8 : 0), xAxisPosY - animPc * calculateOffset(data.datasets[i].data[j], calculatedScale, scaleHop) + (config.barStrokeWidth / 2) - 12);

[ssureshs21]

Hi kshyju i downloaded Chart.js from https://github.com/kshyju/Chart.js. The data labels on bar is working fine.
But the Y-axis scale is not showing the first value which i set to 0 by
" scaleOverride: true,
scaleSteps: 4,
scaleStepWidth: Math.ceil(25),
scaleStartValue: 0"

the first grid line is empty. I want to show that from 0. And also "responsive:true" is not working when i resize the browser.

[tannerlinsley]

@kshyju, I would suggest translating your changes to extend the barchart type instead of a fork of the repo. Please see here for extending http://www.chartjs.org/docs/#advanced-usage-extending-existing-chart-types

[tannerlinsley]

Also, @kshyju, if you are looking to create completely new chart types:

We have updated the project goals today regarding new chart types -- #650

This core project will come with a specific few chart types and is designed to allow modular development of new chart types. We encourage developers to create new chart types and host them in their own repositories.

To find other developers to collaborate with please introduce yourself on https://groups.google.com/forum/#!forum/chartjs-user-discussion to see if there are more people interested in creating this chart type and start hacking!

After v1.0 is released (and it is coming soon), we will create guidelines for third-party projects implementing new chart types. Also we may invite selected chart types to become officially recognized and included beside the core project.

Thank you.

[sgampala05]

My chart looks like this :
var Options = {
scaleFontFamily: "'SegoeUI', 'Segoe UI', 'Arial', sans-serif", scaleFontSize: 10,
scaleGridLineColor: "rgba(0,0,0,.125)", responsive: true, showTooltips: true,
animation: false, animationSteps: 0, scaleShowValues: true
};
var ChartData = {
labels: ['one', 'Two', 'Three', 'Four', 'Five', 'Six'],
datasets: [
{
fillColor: 'rgba(124,190,49,.667)', hightlightFill: 'rgba(124,190,49,1)',data: chartData}
],

};
var drwaChart = new Chart(ctx).Bar(ChartData , Options);

I downloaded the chart.js from https://github.com/kshyju/Chart.js

Still i am not able to display labels on my bar chart. Am i missing something here in options?
Please help!!

[koko20010317]

me too...I can't display labels on chart...please help! Thanks a lot!

[Jarvizx]

Thanks repository @kshyju my solicion (static) for the latest version was added:

// line +2310
ctx.font = '22px "Helvetica Neue", Helvetica, Arial, sans-serif';
ctx.fillStyle = "#000";        
ctx.textAlign = "center";   
ctx.fillText(bar.value, this.scale.calculateBarX(this.datasets.length, datasetIndex, index), (this.scale.calculateY(bar.value))-10);

[dannysindra]

I would love to see this feature implemented as well. It would be required for presentation purpose - I have many charts to show my clients, and asking them to check each bar's value from the axes seems too much.

Please consider to add this feature! Thanks

[etimberg]

@dannysindra take a look at the data_label_combo-bar-line.html sample. It shows a work-around until this is in the core

[dannysindra]

Thanks for the quick response, @etimberg ! The sample is really helpful :)

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

[fogmoon]

@etimberg
data_label_combo-bar-line.html can not be found now.
So have this feature been added in the core? I can not find some useful demo or info to make it.
Could you please give some advise?

[etimberg]

@fogmoon https://github.com/chartjs/Chart.js/blob/master/samples/data_labelling.html

[vitalets]

Link above is browken, the correct one is:
https://github.com/chartjs/Chart.js/blob/master/samples/advanced/data-labelling.html

[simonbrunel]

Closing, there is now a plugin that implements these features: chartjs-plugin-datalabels (see example)