shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

XRange dataLabels

Tue Sep 12, 2023 7:52 pm

Hi,
We have a requirement to create data label in the format as in the picture attached.
2-min.jpg
2-min.jpg (64.61 KiB) Viewed 110 times
The detailed requirement is as below:
1) label is created by combining series one and 2 data.
2) when the value is negative down arrow is displayed for positive up arrow
3) arrow colors will vary based on percentage (red, amber, green etc)

Demo: https://jsfiddle.net/pu4vztfn/3/

dawid.d
Posts: 707
Joined: Thu Oct 06, 2022 11:31 am

Re: XRange dataLabels

Wed Sep 13, 2023 4:30 pm

Hello,

Thanks for the question!

You can do it using the SVGRenderer. See the demo below.

Demo: https://jsfiddle.net/BlackLabel/pkcLtoz9/

Let me know if that is what you were looking for!
Best regards

shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: XRange dataLabels

Wed Sep 13, 2023 6:58 pm

Thank you for the response.
Also a tooltip needs to be displayed on the dataLabels and on clicking on it an alert need to be sent.

Regards
Shre

shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: XRange dataLabels

Thu Sep 14, 2023 9:25 am

Also in case when the length of the name of categories is not fixed it breaks.

https://jsfiddle.net/b2xf78w3/

dawid.d
Posts: 707
Joined: Thu Oct 06, 2022 11:31 am

Re: XRange dataLabels

Fri Sep 15, 2023 8:00 am

Hi,

The Highchart tooltip is strictly assigned to a point, so if you want to display a tooltip not related to a point, but e.g. to a label, you have to render it custom. There have already been several topics on the forum related to custom rendering of tooltips. See, for example, this one: viewtopic.php?t=48075

You can easily add event listeners to SVGElements using the on method: https://api.highcharts.com/class-refere ... Element#on

As for the texts overlapping, you can change the position of the element based on the width of the axis labels, and then correct the left margin of the chart. If you have any questions about this, feel free to ask.

Best regards!

shreshtha
Posts: 25
Joined: Thu May 26, 2022 8:15 am

Re: XRange dataLabels

Thu Sep 21, 2023 9:16 am

I was able to fix the positing of the customText but the entire text (5DΔ, 30DΔ, 90DΔ) is not visible, its getting trim. Can we set a width for the categories label? Also how can we access the 'toolTipVal' inside mouseover?

Demo: https://jsfiddle.net/jhrfvn3c/1/

Regards,
SS

dawid.d
Posts: 707
Joined: Thu Oct 06, 2022 11:31 am

Re: XRange dataLabels

Fri Sep 22, 2023 11:13 am

Hello,

You can set the appropriate margin based on the longest custom text. You can render the tooltip using a renderer, as in the demo below.

Demo: https://jsfiddle.net/BlackLabel/w4a8voxr/

Regards!

Return to “Highcharts Usage”