More than one label in plotLines

[RTDEV]

Hello Team,
I need help with implementing custom label for plot line with left and right value or text, but can't find the way how to do it.

highcharts.jpg (50.29 KiB) Viewed 121 times

[jakub.s]

Hi,

Welcome to our forum & thanks for the question!

Currently, there's no option that you can add to the config to achieve this. However, you can easily render a custom label on the plotLine using the Highcharts.SVGRenderer.

With our SVGRenderer you can render custom SVG elements such as: texts, labels, rectangles, circles, custom shapes (literally anything that you can draw as an SVG).

Usually, we do it like this:

1. Use the chart.events.render event which is triggered after each chart render.

2. If the custom element has already been rendered it means that it's not the first render of the chart; thus, we only need to reposition it correctly as the dimensions of the chart might have changed.

3. If the custom element has not been rendered it means that it is the first render of the chart; thus, we have to render it for the first time with the Highcharts.SVGRenderer.

Here's a demo: https://jsfiddle.net/BlackLabel/oyjd7xz2/

You can style this label as you wish with the .attr() and .css() methods which exist on the Highcharts.SVGElement.

Please let me know if that helps.

Best regards!

[RTDEV]

Thanks for your attention!
And I have another problem with custom label on plotLine, can you help me with this moment. How I can dynamically change the width of yAxis labels block and align elements along the entire border?

image.jpg (107.37 KiB) Viewed 99 times

[jakub.s]

Hi,

Thanks!

1. You can align the labels to the right with the yAxis.labels.align property.

Demo: https://jsfiddle.net/BlackLabel/L4tn0hk3/
API: https://api.highcharts.com/highcharts/y ... bels.align

2. You can add a custom label with the Highcharts.SVGRenderer.

Demo: https://jsfiddle.net/BlackLabel/n38qum7h/
API: https://api.highcharts.com/class-refere ... VGRenderer

- we use the chart.events.render which triggers after each chart render
- if the customLabel has not yet been created, we render it as a text with the SVGRenderer
- you can add additional styles/attributes via the .css() and .attr() methods
- if the customLabel has been created, we reposition it

Please let me know if that helps.

Best regards!

[RTDEV]

Thanks a lot!)

And other small questions, how I can reset scroll position to the end of the scroll when data change?

tg_image_3338045328.jpeg (39.41 KiB) Viewed 77 times

[jakub.s]

Hi,

Thanks!

You can set the extremes of the xAxis with the Axis.setExtremes(min, max) method.

API: https://api.highcharts.com/class-refere ... etExtremes
Demo: https://jsfiddle.net/BlackLabel/j83qe5gn/

Please let me know if that works for you.

Kind regards!