XRange dataLabels

[shreshtha]

Hi,
We have a requirement to create data label in the format as in the picture attached.

2-min.jpg (64.61 KiB) Viewed 112 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]

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]

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]

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

https://jsfiddle.net/b2xf78w3/

[dawid.d]

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]

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]

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!