I am using angular high charts. I wanted to know if we can add a pointer to the axis displaying the latest value of the series, like the one shown in the image below. I do have a shared tool-tip like the one in this example:
tooltip: {
xDateFormat: '%d/%m/%Y',
shared: true,
split: false,
enabled: true},
I want to keep the tool-tip, but moreover even if i do not hover on any series, i still want to see the latest values stuck to the axis.
You can assign an annotaion to every last point and move them outside a plot area in render
event:
chart: {
...,
events: {
render: function() {
this.annotations[0].labels.forEach(function(label) {
label.graphic.attr({
x: this.plotLeft + this.plotWidth
});
}, this);
}
}
},
annotations: [{
labelOptions: {
padding: 5,
align: 'left',
overflow: 'none',
verticalAlign: 'middle',
allowOverlap: true,
text: '{point.y:.2f}',
y: 0,
x: 10
},
labels: [{
point: 's1LastPoint'
}, {
point: 's2LastPoint'
}, {
point: 's3LastPoint'
}]
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4800/
API Reference:
Thanks @ppotaczek for the help, but I am unable to see the live demo of the fiddle. I can just see the series legends but not the data or any labels. So I am unable to validate.
Hi @user2833621, Please check this example: jsfiddle.net/BlackLabel/u06prdns/1