Kendo UI Graph: dynamically adjust the number of shortcuts

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?

+4

Source: https://habr.com/ru/post/1658664/


All Articles