qleo
Posts: 2
Joined: Wed Mar 29, 2023 12:37 pm

Recalculate marker density/threshold when zooming

Hi,
i have data which is in gernal not very dense, only at the edge:

data: [{ x: 0, y: 10 }, { x: 400, y: 20 }, { x: 800, y: 12 }, { x: 1200, y: 120 }, { x: 2000, y: 14 }, {x:2001, y:15}]

Due to the values of x=2000 and x=2001, markers are not shown as the markers for 2000/20001 would overlap (https://api.highcharts.com/highcharts/p ... dThreshold)

So far its fine, but when i am zooming in, e.g. the area of x=50..1950, markers are still not shown even tho all markers in this area are non-overlapping. I would assume, this is because 2000/2001 is still taking into account. When zooming very close (like x=795..805) the marker is shown.

Is there a way to re-calculate the density/threshold bases on xMin/xMax of the zoomed area?

Thanks a lot!

Demo: http://jsfiddle.net/05o2s9c4/
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Recalculate marker density/threshold when zooming

Hello,

Welcome to our forum and thanks for contacting us with your question!

First of all, you might want to consider settting marker.enabled value as true. This way, it will override enabledThreshold and display markers anyway, even though they might overlap each other.

Another way of doing it is by making use of afterSetExtremes event. You can check if the zoom occured, and then set markers as enabled. You could also add a condition for finding if xAxis min & max are within a range of non-overlapping points, and then enable markers.

Demo: http://jsfiddle.net/BlackLabel/1grjpxyd/

API:
https://api.highcharts.com/highcharts/p ... er.enabled
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/x ... etExtremes
https://api.highcharts.com/class-refere ... ies#update

Let me know which solution suits you best!
Best regards!
Jędrzej Ruta
Highcharts Developer
qleo
Posts: 2
Joined: Wed Mar 29, 2023 12:37 pm

Re: Recalculate marker density/threshold when zooming

Thanks for your reply.

The data I posted is just an example, there will be areas with denser and less dense points, so I do not want to set
marker: {
enabled = true
}

for the chart.

I like the approach where highchart is checking whether there are overlapping points. But i want to limit it to e.min / e.max in case of afterSetExtremes event, isn't that possible?
jedrzej.r
Posts: 725
Joined: Tue Jan 24, 2023 11:21 am

Re: Recalculate marker density/threshold when zooming

Hi,

Yes, it is possible to check if the zoom-in area has non-overlapping points, and then enable the markers. Take a look at the demo I've prepared for you: http://jsfiddle.net/BlackLabel/szu0hkta/

Let me know if this is what you were looking for.
Best regards!
Jędrzej Ruta
Highcharts Developer

Return to “Highcharts Usage”