I'm trying to create a simple Highcharts bar graph with a single series and multiple labels in the legend. How is this done?
Here is an example:
$('#container').highcharts({
chart: {
type: 'bar',
},
legend: {
enabled: true,
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
labelFormatter: function() {
return this.name + " - <span class='total'>"+this.y+"</span>"
}
},
title: {
text: 'Simple Bar Graph'
},
xAxis: {
categories: ['First', 'Second', 'Third', 'Fourth', , 'Fifth'],
allowDecimals: false
},
yAxis: {
allowDecimals: false
},
series: [
{
data: [
{y: 6, name: 'First', color: 'blue'},
{y: 7, name: 'Second', color: 'green'},
{y: 9, name: 'Third', color: 'yellow'},
{y: 1, name: 'Fourth', color: 'orange'},
{y: 1, name: 'Fifth', color: 'red'}
]
}
],
});
Luckily, Highcharts is pretty flexible. We can do some tricks (maybe hacks?) to achieve this kind of "non-convential" tasks.
What you could do in your case is create "fake" serieses, and use custom event handlers:
In order to format the legend labels we can use
labelFormatter
for the legend:this will set the legend label to the name of the corresponding point.
And finally we need to handle the legend click, to imitate the "normal" behaviour:
These are just examples, you can obviously improve this and adjust to your own need.
Good Luck!
http://jsfiddle.net/otm0oq2c/3/
A simpler way than the accepted answer is by setting the
categories
key as an array of 'labels' and theseries.data
as an array of 'values'.Here is an example that uses a collection (Array of objects) or a flat object to populate a bar chart in Highcharts (jsfiddle):
The example assumes a an array of objects with keys name/value, or a simple object of key/value: