Keep the rendered text at the same position in case null data point

[itchamp]

Hi,

In a categorized map, I am rendering some text for each category (i.e. series) using chart.renderer API. This works as expected as shown in this fiddle - https://jsfiddle.net/e7ghk6um/1/

When a particular data point is missing (i.e. null data points) in the map, the same text is moved to some other location as shown in this fiddle - https://jsfiddle.net/kjf5sdt0/3/
In this example, note that the text "Category 1" and "Category 2" shifted from the location as compared to when no null data point. I want to show the text exactly at the same location as when there is no null data point (As shown in https://jsfiddle.net/e7ghk6um/1/).

Could you please guide me to accomplish it?

I really appreciate your guidance here. Thank you.

[jakub.s]

Hi,

Thanks for the question! Appreciate you explaining your problem thoroughly.

The source of the problem is the pair of (x, y) coordinates passed to renderer.text() method which is different for your lastPoint in the first demo and in the second demo.

If you pass the same (x, y) coordinates in both cases then you will have labels in the exact same positions.

One of the solutions that I can propose to you is just making sure that the lastPoint you're using for a certain series is the one you desire to use - here's a demo: https://jsfiddle.net/BlackLabel/msuhL6d3/

Let me know if that helps.

Best regards!

[itchamp]

Yes, That was it. It works!

Thank you so so much!! Really appreciate your guidance.