I have a scalable area diagram and an x axis label for each datapoint. When the chart loads, there are too many labels, so I set the step parameter:
categoryAxis: {
name: 'CatAxis',
categories: graphLabels,
step: 30
}
But when the user approaches, I need to reduce the number of steps, otherwise no shortcuts will be displayed at all. So I signed up for the zoomEnd event and calculated the desired number of steps:
function onZoomEnd(e) {
var xRange = e.axisRanges.CatAxis;
if (xRange) {
var diff = xRange.max - xRange.min;
var step = 1;
while (diff / step > 6) {
step++;
}
e.sender.setOptions({ categoryAxis: { labels: { step: step } } });
}
But adjusting the parameters here leads to an update of the graph and, thereby, to a reduction in the level of scaling. The ultimate goal is to show a reasonable number of labels without overlapping or disappearing when zoomed in and out. Any ideas how to achieve this?