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:
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
});
}
1 Answer, 1 is accepted
Hello Kenia,
Thank you for reaching out.
It is possible to dynamically adjust the marker size in a scatter chart based on the zoom level to avoid saturation when markers are close together. The main issue with your current approach is using the zoom event, which fires continuously during zooming and can lead to performance problems and freezing due to repeated redraws.
Recommended Approach
- Use the
zoomEndevent instead ofzoom. ThezoomEndevent triggers only after the zoom action is completed, preventing excessive redraws and improving performance. - Update the marker size inside the
zoomEndhandler, then redraw or update the chart options.
Example Implementation
zoomable: true,
zoomEnd: function(e) {
var chart = this;
var xRange = e.axisRanges["xAxis"];
if (!xRange) return;
var zoomLevel = xRange.max - xRange.min;
var size =
zoomLevel > 365 ? 3 :
zoomLevel > 100 ? 4 :
zoomLevel > 30 ? 5 :
zoomLevel > 10 ? 10 : 8;
// Prevent unnecessary redraws
if (chart._lastMarkerSize === size) return;
chart._lastMarkerSize = size;
chart.options.series.forEach(function(s) {
if (!s.markers) s.markers = {};
s.markers.size = size;
});
chart.setOptions({
series: chart.options.series
});
}
Additional Tips
- If you want to further improve performance, you can disable chart transitions by setting
transitions: falsein the chart options. - If you have multiple series, ensure each series' marker configuration is updated as shown.
I hope this will prove helpful.
Regards,
Eyup
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.