We Keep Coding

Add Labels to Chart.js Bar Chart

I am trying to add labels to my bar chart. See the JS fiddle and code below. How would I change my code to add labels?
http://jsfiddle.net/amwmedia/8kqvyhqv/
var myNewChart;
var data = [
{
value: 30,
label: "hello",
color: "#F7464A"
}, {
value: 50,
color: "#E2EAE9"
}, {
value: 100,
color: "#D4CCC5"
}, {
value: 40,
color: "#949FB1"
}, {
value: 100,
color: "#4D5360"
},
];
var options = {
animation: true,
animationEasing: 'easeInOutQuart',
animationSteps: 80,
multiTooltipTemplate: "<%= datasetLabel %> - <%= value %>"
};
var ctx = document.getElementById("myChart")
.getContext("2d");
myNewChart = new Chart(ctx).Doughnut(data, options);

I noticed your jsfiddle is using chart.js version 1. My answer uses version 2, as that is all I could find documentation for.
Looks like all you need to do is put labels in the data object:
var data = {
labels: [
"label1",
"label2",
"label3",
"label4",
"label5"
],
datasets: [
{
data: [
30,
50,
100,
40,
100
],
backgroundColor:[
'#F7464A',
'#E2EAE9',
'#D4CCC5',
'#949FB1',
'#4D5360'
]
}]
};
See fiddle. (this is using Chart.js 2.0)

Click anchors the label to its respective section HTML in Chart.js

I have a chart and when clicked on each chart label the scroll move to their respective section in HTML.
I'm using Chart.js, The only action I could do when I click the label is an alert.
Javascript
// Chart
var barData = {
labels: ['Red', 'Orange', 'Yellow', 'Green']
};
var pieData = [{
value: 40,
color: "#ad1f27",
highlight: "#ad474c",
label: "Red"
}, {
value: 40,
color: "#c26828",
highlight: "#c27e4d",
label: "Orange"
}, {
value: 10,
color: "#c3b830",
highlight: "#c3bc6b",
label: "Yellow"
}, {
value: 10,
color: "#14773c",
highlight: "#2da15b",
label: "Green"
}];
var options = {
segmentShowStroke: false
};
Chart.defaults.global.responsive = true;
var context = document.getElementById('chartDonnut').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData, options);
$("#chartDonnut").click(function(evt) {
var activePoints = skillsChart.getSegmentsAtEvent(evt);
var url = activePoints[0].label + activePoints[0].value + activePoints[0].x + activePoints[0].y;
alert(url);
});
jsfiddle

To access the selected field, just you need to use internal links.
You need to add modify the html to be like this :
<canvas id="chartDonnut"></canvas>
<div id="red" class="redSection">
<p>Red Section</p>
</div>
<div id="orange" class="orangeSection">
<p>Orange Section</p>
</div>
<div id="yellow" class="yellowSection">
<p>Yellow Section</p>
</div>
<div id="green" class="greenSection">
<p>Green Section</p>
</div>
And for the jquery code, it'll be like this :
// Chart
var barData = {
labels: ['Red', 'Orange', 'Yellow', 'Green']
};
var pieData = [{
value: 40,
color: "#ad1f27",
highlight: "#ad474c",
label: "Red"
}, {
value: 40,
color: "#c26828",
highlight: "#c27e4d",
label: "Orange"
}, {
value: 10,
color: "#c3b830",
highlight: "#c3bc6b",
label: "Yellow"
}, {
value: 10,
color: "#14773c",
highlight: "#2da15b",
label: "Green"
}];
var options = {
segmentShowStroke: false
};
Chart.defaults.global.responsive = true;
var context = document.getElementById('chartDonnut').getContext('2d');
var skillsChart = new Chart(context).Doughnut(pieData, options);
$("#chartDonnut").click(function(evt) {
var activePoints = skillsChart.getSegmentsAtEvent(evt);
var url = activePoints[0].label + activePoints[0].value + activePoints[0].x + activePoints[0].y;
if(activePoints[0].label=="Red"){
window.location="#red";
}
if(activePoints[0].label=="Orange"){
window.location="#orange";
}
if(activePoints[0].label=="Yellow"){
window.location="#yellow";
}
if(activePoints[0].label=="Green"){
window.location="#green";
}
});

Here's the modified data that should be in the click handler:
$("#chartDonnut").click(function(evt) {
var sector = skillsChart.getSegmentsAtEvent(evt)[0].label;
document.getElementsByClassName(sector.toLowerCase()+'Section')[0].scrollIntoView();
});
Working jsfiddle: http://jsfiddle.net/1efr492j/1/
Note that it will jump to the other spot, not smoothly scroll there. If you want it to smoothly scroll, look here for some suggestions: scrollintoview animation
The other answer will work as well, but this is a bit less invasive and changes less code

Data Not Showing in Highcharts

I'm attempting to combine a couple of different chart demos from Highcharts.
My examples are: Data classes and popup and Small US with data labels
I want the map from the first with the popup feature of the second. I need to connect the map to my own google spreadsheet but for now I'm just trying to get the data from the first example to work.
This is what I have so far but can't seem to get any data in the map. I thought I had a joinBy problem, and I may still, but when I set joinBy to null I thought "the map items are joined by their position in the array", yet nothing happened.
https://jsfiddle.net/9eq6mydv/
$(function () {
// Load the data from a Google Spreadsheet
// https://docs.google.com/a/highsoft.com/spreadsheet/pub?hl=en_GB&hl=en_GB&key=0AoIaUO7wH1HwdFJHaFI4eUJDYlVna3k5TlpuXzZubHc&output=html
Highcharts.data({
googleSpreadsheetKey: '0AoIaUO7wH1HwdDFXSlpjN2J4aGg5MkVHWVhsYmtyVWc',
googleSpreadsheetWorksheet: 1,
// custom handler for columns
parsed: function (columns) {
// Make the columns easier to read
var keys = columns[0],
names = columns[1],
percent = columns[10],
// Initiate the chart
options = {
chart : {
renderTo: 'container',
type: 'map',
borderWidth : 1
},
title : {
text : 'US presidential election 2008 result'
},
subtitle: {
text: 'Source: <a href="http://en.wikipedia.org/wiki/United_States_presidential_election,' +
'_2008#Election_results">Wikipedia</a>'
},
mapNavigation: {
enabled: true,
enableButtons: false
},
legend: {
align: 'right',
verticalAlign: 'top',
x: -100,
y: 70,
floating: true,
layout: 'vertical',
valueDecimals: 0,
backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255, 255, 255, 0.85)'
},
colorAxis: {
dataClasses: [{
from: -100,
to: 0,
color: '#C40401',
name: 'McCain'
}, {
from: 0,
to: 100,
color: '#0200D0',
name: 'Obama'
}]
},
series : [{
data : data,
dataLabels: {
enabled: true,
color: '#FFFFFF',
format: '{point.code}',
style: {
textTransform: 'uppercase'
}
},
mapData: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']),
joinBy: keys,
name: 'Democrats margin',
point: {
events: {
click: pointClick
}
},
tooltip: {
ySuffix: ' %'
},
cursor: 'pointer'
}, {
type: 'mapline',
data: Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small'], 'mapline'),
color: 'silver'
}]
};
/**
* Event handler for clicking points. Use jQuery UI to pop up
* a pie chart showing the details for each state.
*/
function pointClick() {
var row = this.options.row,
$div = $('<div></div>')
.dialog({
title: this.name,
width: 400,
height: 300
});
window.chart = new Highcharts.Chart({
chart: {
renderTo: $div[0],
type: 'pie',
width: 370,
height: 240
},
title: {
text: null
},
series: [{
name: 'Votes',
data: [{
name: 'Obama',
color: '#0200D0',
y: parseInt(columns[3][row], 10)
}, {
name: 'McCain',
color: '#C40401',
y: parseInt(columns[4][row], 10)
}],
dataLabels: {
format: '<b>{point.name}</b> {point.percentage:.1f}%'
}
}]
});
}
// Read the columns into the data array
var data = [];
$.each(keys, function (i, key) {
data.push({
key: key,//.toUpperCase(),
value: parseFloat(percent[i]),
name: names,
row: i
});
});
// Initiate the chart
window.chart = new Highcharts.Map(options);
},
error: function () {
$('#container').html('<div class="loading">' +
'<i class="icon-frown icon-large"></i> ' +
'Error loading data from Google Spreadsheets' +
'</div>');
}
});
});
UPDATE:
I wanted to share with everyone my final solution. Although Ondkloss did a magnificent job answering my question the popup feature still didn't work and this is because I forgot to include the jQuery for the .dialog call. Once I included that I had an empty popup with a highchart error 17, this is because the highmaps.js code doesn't include the pie chart class. So I had to add the highcharts.js code and include map.js module afterward. You can see my final jsfiddle here.
Thanks again to Ondkloss for the excellent answer!

The problem here mostly comes down to the use of joinBy. Also to correct it there are some required changes to your data and mapData.
Currently your joinBy is an array of strings, like ["al", "ak", ...]. This is quite simply not an accepted format of the joinBy option. You can read up on the details in the API documentation, but the simplest approach is to have a attribute in common in data and mapData and then supply a string in joinBy which then joins those two arrays by that attribute. For example:
series : [{
data : data,
mapData: mapData,
joinBy: "hc-key",
]
Here the "hc-key" attribute must exist in both data and mapData.
Here's how I'd create the data variable in your code:
var data = [];
$.each(keys, function (i, key) {
if(i != 0)
data.push({
"hc-key": "us-"+key,
code: key.toUpperCase(),
value: parseFloat(percent[i]),
name: names[i],
row: i
});
});
This skips the first key, which is just "Key" (the title of the column). Here we make the "hc-key" fit the format of the "hc-key" in our map data. An example would be "us-al". The rest is just metadata that will be joined in. Note that you were referencing your data in the options prior to filling it with data, so this has to be moved prior to this.
This is how I'd create the mapData variable in your code:
var mapData = Highcharts.geojson(Highcharts.maps['countries/us/custom/us-small']);
// Process mapdata
$.each(mapData, function () {
var path = this.path,
copy = { path: path };
// This point has a square legend to the right
if (path[1] === 9727) {
// Identify the box
Highcharts.seriesTypes.map.prototype.getBox.call(0, [copy]);
// Place the center of the data label in the center of the point legend box
this.middleX = ((path[1] + path[4]) / 2 - copy._minX) / (copy._maxX - copy._minX);
this.middleY = ((path[2] + path[7]) / 2 - copy._minY) / (copy._maxY - copy._minY);
}
// Tag it for joining
this.ucName = this.name.toUpperCase();
});
The first part is your "standard map data". The rest is to correctly center the labels for the popout states, and gotten directly from the example.
And voila, see this JSFiddle demonstration to witness your map in action.
I suggest doing some console.log-ing to see how data and mapData have the hc-key in common and that leads to the joining of the data in the series.

How to display Labels on Doughnut chart in Chart.js

I want to know how I would be able to show Labels on the doughnut chart and the legend, I'm using chart.js as plugin
I used scaleShowLabels: true but It doesn't work
here is my code :
var data = [{
value: 30,
color: "#F7464A",
label: "Yasser"
}, {
value: 50,
color: "#E2EAE9",
label: "Zeyd"
}, {
value: 100,
color: "#D4CCC5",
label: "Mouad"
}, {
value: 40,
color: "#949FB1",
label: "Hanine"
}, {
value: 120,
color: "#4D5360",
label: "Kheira"
}
]
var options = {
animation: false,
scaleShowLabels: true
};
//Get the context of the canvas element we want to select
var c = $('#myChart');
var ct = c.get(0).getContext('2d');
var ctx = document.getElementById("myChart").getContext("2d");
/*************************************************************************/
myNewChart = new Chart(ct).Doughnut(data, options);
DEMO + CODE

I found all the solutions of the Chart js main problems,
it's about an edited js file, which has all code samples, you can find more information about it here :
https://github.com/FVANCOP/ChartNew.js

How to add label in chart.js for pie chart

I am displaying Pie chart. But how to Display labels in pie charts.
Below is the chart.js code for pie chart.
this.Pie = function(data, options) {
chart.Pie.defaults = {
segmentShowStroke: true,
segmentStrokeColor: "#fff",
segmentStrokeWidth: 2,
animation: true,
animationSteps: 100,
animationEasing: "easeOutBounce",
animateRotate: true,
animateScale: false,
onAnimationComplete: null
};
var config = (options) ? mergeChartConfig(chart.Pie.defaults, options) : chart.Pie.defaults;
return new Pie(data, config, context);
};
and below is the code of html file for displaying pie chart
code:
var data = [{
value: 20,
color: "#637b85"
}, {
value: 30,
color: "#2c9c69"
}, {
value: 40,
color: "#dbba34"
}, {
value: 10,
color: "#c62f29"
}];
var canvas = document.getElementById("hours");
var ctx = canvas.getContext("2d");
new Chart(ctx).Pie(data);

It is not necessary to use another library like newChart or use other people's pull requests to pull this off. All you have to do is define an options object and add the label wherever and however you want it in the tooltip.
var optionsPie = {
tooltipTemplate: "<%= label %> - <%= value %>"
}
If you want the tooltip to be always shown you can make some other edits to the options:
var optionsPie = {
tooltipEvents: [],
showTooltips: true,
onAnimationComplete: function() {
this.showTooltip(this.segments, true);
},
tooltipTemplate: "<%= label %> - <%= value %>"
}
In your data items, you have to add the desired label property and value and that's all.
data = [
{
value: 480000,
color:"#F7464A",
highlight: "#FF5A5E",
label: "Tobacco"
}
];
Now, all you have to do is pass the options object after the data to the new Pie like this: new Chart(ctx).Pie(data,optionsPie) and you are done.
This probably works best for pies which are not very small in size.
Pie chart with labels

EDIT: http://jsfiddle.net/nCFGL/223/ My Example.
You should be able to like follows:
var pieData = [{
value: 30,
color: "#F38630",
label: 'Sleep',
labelColor: 'white',
labelFontSize: '16'
},
...
];
Include the Chart.js located at:
https://github.com/nnnick/Chart.js/pull/35

Rachel's solution is working fine, although you need to use the third party script from raw.githubusercontent.com
By now there is a feature they show on the landing page when advertisng the "modular" script. You can see a legend there with this structure:
<div class="labeled-chart-container">
<div class="canvas-holder">
<canvas id="modular-doughnut" width="250" height="250" style="width: 250px; height: 250px;"></canvas>
</div>
<ul class="doughnut-legend">
<li><span style="background-color:#5B90BF"></span>Core</li>
<li><span style="background-color:#96b5b4"></span>Bar</li>
<li><span style="background-color:#a3be8c"></span>Doughnut</li>
<li><span style="background-color:#ab7967"></span>Radar</li>
<li><span style="background-color:#d08770"></span>Line</li>
<li><span style="background-color:#b48ead"></span>Polar Area</li>
</ul>
</div>
To achieve this they use the chart configuration option legendTemplate
legendTemplate : "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<segments.length; i++){%><li><span style=\"background-color:<%=segments[i].fillColor%>\"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>"
You can find the doumentation here on chartjs.org
This works for all the charts although it is not part of the global chart configuration.
Then they create the legend and add it to the DOM like this:
var legend = myPie.generateLegend();
$("#legend").html(legend);
Sample
See also my JSFiddle sample

Use ChartNew.js instead of Chart.js
...
So, I have re-worked Chart.js. Most of the changes, are associated to requests in "GitHub" issues of Chart.js.
And here is a sample http://jsbin.com/lakiyu/2/edit
var newopts = {
inGraphDataShow: true,
inGraphDataRadiusPosition: 2,
inGraphDataFontColor: 'white'
}
var pieData = [
{
value: 30,
color: "#F38630",
},
{
value: 30,
color: "#F34353",
},
{
value: 30,
color: "#F34353",
}
]
var pieCtx = document.getElementById('pieChart').getContext('2d');
new Chart(pieCtx).Pie(pieData, newopts);
It even provides a GUI editor http://charts.livegap.com/
So sweet.

For those using newer versions Chart.js, you can set a label by setting the callback for tooltips.callbacks.label in options.
Example of this would be:
var chartOptions = {
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return 'label';
}
}
}
}