Edit this page

Chart Stops Responding on Mobile Devices after Multiple Pan and Zoom Gestures

Environment

Product Progress Kendo UI Chart
Operating System iOS, Android

Description

After continuously panning and zooming a Chart, which uses the default SVG rendering on mobile devices, it stops responding to pan and zoom gestures.

Cause

The Chart re-renders its SVG elements when the pan and zoom actions are executed which breaks the touch event sequence.

Suggested Workarounds

Kendo UI does not provide a built-in solution for avoiding this behavior. However, you can still work around the issue by using canvas rendering which does not re-render the Chart element on refreshing the page.

    <div id="chart"></div>
    <script>
      // Generate sample data
      var data = [];
      var step = Math.PI / 4;
      for (var x = -50; x < 50; x += step) {
        data.push({ x: x, y: Math.sin(x) });
      }

      function createChart() {
        $("#chart").kendoChart({
          renderAs: "canvas",
          dataSource: {
            data: data
          },
          xAxis: {
            min: -2,
            max: 2,
            labels: {
              format: "{0:n1}"
            }
          },
          yAxis: {
            labels: {
              format: "{0:n2}"
            }
          },
          series: [{
            type: "scatterLine",
            xField: "x",
            yField: "y",
            style: "smooth",
            markers: {
              visible: false
            }
          }],
          pannable: true,
          zoomable: true
        });
      }

      $(document).ready(createChart);
    </script>

See Also

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy