Display series name at the end of line

[RIo]

Hi,

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

hyqMn.png (21.29 KiB) Viewed 231 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 (21.29 KiB) Viewed 231 times

Thanks!

[RIo]

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 (7.53 KiB) Viewed 211 times

Thanks!

[jedrzej.r]

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!