5

I have a zoomable area chart and an x-axis label for every datapoint. When the chart loads, there is way too many labels, therefor I set the step option:

categoryAxis: {
    name: 'CatAxis',
    categories: graphLabels,
    step: 30
}

But when the user zooms in, I need to decrease the amount of steps, otherwise no labels will be shown at all. Therefor I subscribed to the zoomEnd event and calculate the desired amount of step:

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 setting the options here causes the chart to refresh and thereby losing its zoom level. The ultimate goal is to show a reasonable amount of labels without them overlapping or disappearing when zooming in and out. Any ideas how to achieve this?

user2900970
  • 751
  • 1
  • 5
  • 24

1 Answers1

0

you can maintain the zoom level of the chart using the following example from documentation

https://docs.telerik.com/kendo-ui/knowledge-base/maintain-pan-zoom-state

<button id="rebind">Rebind Chart</button>
<div id="chart"></div>
<script>
  // Sample data
  var data = [];
  for (var i = 0; i < 100; i++) {
    var val = Math.round(Math.random() * 10);
    data.push({
      category: "C" + i,
      value: val
    });
  }

  function createChart() {
    var axisMin = 0;
    var axisMax = 10;

    function updateRange(e) {
      var axis = e.sender.getAxis('axis')
      var range = axis.range()
      axisMin = range.min;
      axisMax = range.max;
    }

    function restoreRange(e) {
      e.sender.options.categoryAxis.min = axisMin;
      e.sender.options.categoryAxis.max = axisMax;
    }

    $("#chart").kendoChart({
      renderAs: "canvas",
      dataSource: {
        data: data
      },
      categoryAxis: {
        name: "axis",
        min: axisMin,
        max: axisMax,
        labels: {
          rotation: "auto"
        }
      },
      series: [{
        type: "column",
        field: "value",
        categoryField: "category"
      }],
      pannable: {
        lock: "y"
      },
      zoomable: {
        mousewheel: {
          lock: "y"
        },
        selection: {
          lock: "y"
        }
      },
      zoom: updateRange,
      drag: updateRange,
      dataBound: restoreRange
    });
  }

  $("#rebind").click(function() {
    $("#chart").data("kendoChart").dataSource.read();
  });

  $(document).ready(createChart);
</script>
A.Awada
  • 134
  • 2
  • 8