iiiml0sto1
Posts: 8
Joined: Tue Nov 22, 2022 7:54 pm

Y Axis Crosshair Label - useHTML

Hi, is it not possible to modify the crosshair label and use the property useHTML to customize it as we want to?


I have tried to set the useHTML and return an HTML element built with template string literals

Code: Select all

                yAxis: {
                    offset: 10,
                    crosshair: {
                        snap: false,
                        width: 1,
                        color: "gray",
                        dashStyle: "Dash",
                        label: {
                            useHTML: true,
                            enabled: true,
                            formatter: (e) => {
                                return getCrosshairYFormatter(e);
                            },
                        },
                    }
                }
Usually, when exploring the useHTML, I have been able to create a fully custom-made HTML element that will be rendered, but in this case, I don't see that being rendered. Instead, it renders a tspan inside the SVG. However, it does add my custom classes to the tspan element.

I can't find anything in the documentation: yAxis->crosshair about the label option. However, if I use the useHTML on the yAxis->plotlines->label I am able to customize that label as HTML fully. The plotlines also have a tab for the label in the documentation :)
kamil.k
Posts: 458
Joined: Thu Oct 06, 2022 12:49 pm

Re: Y Axis Crosshair Label - useHTML

Hello there,

Thanks for contacting us again!

Unfortunately, there is no yAxis.crosshair.label property in Highcharts. Please, take a look at all the possible options you can use to modify the crosshair: https://api.highcharts.com/highcharts/yAxis.crosshair

What you can do instead is create custom elements to achieve the same effect, see the example of custom crosshairs: https://jsfiddle.net/BlackLabel/do2az0j9/

Note that the renderer method on the chart instance allows you to create custom elements, which you can read more about here: https://api.highcharts.com/class-refere ... erer#toc10

As you can see in the example, there is a path method used but the label or text are also possible.

If you will struggle to implement this, It will be much helpful for me if you specify where exactly the labels should be placed. Then I will be able to help you better and prepare a demo.

Looking forward to your response,
Kind Regards!
Kamil Kubik
Highcharts Developer

Return to “Highcharts Stock”