RIo
Posts: 6
Joined: Thu Sep 07, 2023 12:24 pm

Display series name at the end of line

Hi,

I am trying to do display series name at the end of line as displayed in below images.
hyqMn.png
hyqMn.png (21.29 KiB) Viewed 317 times
I implemented this solution:

events: {
load() {
const chart = this;

const { series } = chart;
series.forEach((s) => {
const len = s.data.length;
const point = s.data[len - 1];

if (point.plotX && point.plotY) {
chart.renderer
.text(point.series.name, point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop + 10)
.attr({
fill: 'rgba(0,0,0,1)',
zIndex: 5
})
.add();
}
});
}

But usually in my chart I have a situation where 10 points are in the same position and then the series names overlap like in the picture below
hyqMn.png
hyqMn.png (21.29 KiB) Viewed 317 times
Thanks!
RIo
Posts: 6
Joined: Thu Sep 07, 2023 12:24 pm

Re: Display series name at the end of line

RIo wrote: Thu Sep 07, 2023 12:38 pm Hi,

I am trying to do display series name at the end of line as displayed in below images.
hyqMn.png

I implemented this solution:

events: {
load() {
const chart = this;

const { series } = chart;
series.forEach((s) => {
const len = s.data.length;
const point = s.data[len - 1];

if (point.plotX && point.plotY) {
chart.renderer
.text(point.series.name, point.plotX + chart.plotLeft + 10, point.plotY + chart.plotTop + 10)
.attr({
fill: 'rgba(0,0,0,1)',
zIndex: 5
})
.add();
}
});
}

But usually in my chart I have a situation where 10 points are in the same position and then the series names overlap like in the picture below
Screenshot 2023-09-08 at 07.46.58.png
Screenshot 2023-09-08 at 07.46.58.png (7.53 KiB) Viewed 297 times
Thanks!
jedrzej.r
Posts: 700
Joined: Tue Jan 24, 2023 11:21 am

Re: Display series name at the end of line

Hi!

Welcome to our forum and thanks for reaching out to us with your inquiry!

There are few ways to get the series name display on the series end. One way to achieve this result would be by enabling dataLabels on last point and then, using format string or formatter callback, set the series name as the dataLabel. Defaultly, when there is a possible overlapping, the label gets hidden, which can be overriden by enabling allowOverlap property.

If you prefer to use SVGRenderer, than you could iterate over last points of each series to check if their plotX and plotY values overlap, and if they do, you can try to space them out a little bit. This would probably require adding some custom code that would detect overlapping points.

Also, if you'd be fine with series names not aligned on the last point position, you could try series-labels module, which allows to output series names on the plot area avoiding the overlapping issue,

Data labels demo: https://jsfiddle.net/BlackLabel/9ygquf2r/
Series labels demo: https://jsfiddle.net/BlackLabel/hrjo3y7f/

API:
https://api.highcharts.com/highcharts/p ... lowOverlap
https://api.highcharts.com/highcharts/p ... els.format
https://api.highcharts.com/highcharts/p ... .formatter

Let me know if you have any further questions!
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Stock”