[Solved] Dynamically change the marker size while zooming in and out

[Kenia]

I am working with a scatter chart and trying to modify the zoomable feature to change the markers size dynamically. So while zoomed out the markers will be smaller and as you zoom in they will be getting bigger. This is to avoid saturation when there's markers close to each other.

Is that possible?

                chart.setOptions({
                    series: seriesList,
                    yAxis: yAxisList,
                    xAxis: {
                        type: "date"
,                        labels: {
                            format: "{0:MM/dd/yyyy}",
                            rotation: 30
                        }
                    },
                    zoomable: {
                        mousewheel: {
                            lock: "y"
                        },
                    },
                    pannable: {
                        lock: "y"
                    }
                });

 

I've tried using this function on zoom but it doesn't work, it freezes the zoom:

                function onZoom(e) {
                        let chart = e.sender;

                        let xRange = e.axisRanges?.xAxis;
                        if (!xRange) return;
                    
                        let zoomLevel = xRange.max - xRange.min;
                    
                        let size =
                            zoomLevel > 365 ? 3 :
                            zoomLevel > 100 ? 4 :
                            zoomLevel > 30  ? 5 :
                            zoomLevel > 10  ? 10 : 8;
                    
                        // prevent constant redraw spam
                        if (chart._lastMarkerSize === size) return;
                        chart._lastMarkerSize = size;
                    
                        chart.options.series.forEach(s => {
                            if (!s.markers) s.markers = {};
                            s.markers.size = size;
                        });
                    
                        chart.setOptions({
                            series: chart.options.series
                        });
                  }