Lines - Series Label at right
The series name is labeled at the right end of the line in place of a legend.
HTML
<script src="http://highcharts.com/js/testing.js"></script>
<div id="container" style="height: 400px'"></div>
<button id='btn1'>Show series name whose id is 'id1'</button>
<button id='btn2'>Show the list of all ids</button>
JavaScript
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
marginRight: 70
},
legend:{enabled:false},
series: [{
name:'Series 1',
id:'id1',
data:[29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
},{
name:'Series 2',
id:'id2',
data:[135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]
},
function(chart){
$(chart.series).each(function(i, serie){
//console.log(this.get(id));
console.log(this.options.id);
//to get the appropraite 'y' position
var point = serie.data[serie.data.length-1];
chart.renderer.text(
//the text to render
'<span style="font-weight:bold;color:' + serie.color + ';">' + serie.name + '</span>',
//the 'x' position
chart.plotLeft+chart.plotWidth+5,
//the 'y' position
chart.plotTop + point.plotY+3).add()
});
});
$('#btn1').click(function(){
var idToUse = 'id1';
var serie = chart.get(idToUse);
alert(serie.name);
});
$('#btn2').click(function(){
var list ="";
$(chart.series).each(function(i, serie){list+= " "+ serie.options.id});
alert(list);
});