Stone Stone - 2 months ago 21
jQuery Question

How to show the legend in HighCharts

I am working with Hightcharts, I try to show the legend of the chart, but I have no idea why don't show it.

function multipleCharts(current_data) {
var seriesOptions = [],
type = ['jobs_running', 'jobs_pending'];
for (var j = 0; j < current_data.length; j++) {
var project = current_data[j]['name'];
for (var i = 0; i < type.length; i++) {
seriesOptions.push({
name: project + ' ' + type[i],
data: current_data[j][type[i]]
});
}
}
$('#containerChart').highcharts('StockChart', {

tooltip: {
formatter: function(){
s = '';
$.each(this.points, function(){
s += '<br/>' + '<span style="color:'+ this.series.color +'; text-transform: uppercase;">' + this.series.name + ':' + '</span>'+ ' ' + Highcharts.numberFormat(this.y,0) + ' jobs';
});
return s;
},
},
legend: {
labelFormatter: function() {
serie_name = '';
$.each(this.series, function(){
serie_name += this.series.name + '<br/>';
});
return serie_name;
},
},
rangeSelector: {
buttonTheme: { // styles for the buttons
fill: 'none',
stroke: 'none',
'stroke-width': 0,
r: 8,
style: {
color: '#f47321',
fontWeight: 'bold'
},
states: {
hover: {
},
select: {
fill: '#f47321',
style: {
color: 'white'
}
}
// disabled: { ... }
}
},
inputBoxBorderColor: '#005030',
inputBoxWidth: 120,
inputBoxHeight: 18,
inputStyle: {
color: '#005030',
fontWeight: 'bold'
},
labelStyle: {
color: '#005030',
fontWeight: 'bold'
},
selected: 0
},
series: seriesOptions
});
}


even I try something like this, very easy, and didn't show anything

legend: {
title: {
text: 'hola',
style: {
fontStyle: 'italic'
}
},

},


Any idea!
Thanks in advances

Answer

In legend set enabled to true.

legend: {
            enabled: true
        },
Comments