Edit this page

Performance Issues

This page provides tips and tricks on how to handle and improve the performance of the Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps.

Tips and Tricks

Use Canvas Rendering

Switching to Canvas rendering improves the performance of the widgets, especially on mobile devices. It facilitates the visualization of data by its fast update and lower resource usage.

Important

Versions of Kendo UI prior to 2016.2 do not support interactivity and do not fire events when rendering in Canvas.

The example below demonstrates how to configure Canvas rendering.

Example
    <div id="chart"></div>
    <script>
        $(function() {
            $("#chart").kendoChart({
                renderAs: "canvas",
                series: [{
                    type: "column",
                    data: [1, 2, 3]
                }]
            });
        });
    </script>

For more information on configuration settings, refer to the renderAs API article.

Use Inline Binding

When using a DataSource binding, all data items are be wrapped in Observable instances to track changes.

This is generally unnecessary for the Chart. It might become an issue if you have a large number of data points—5,000 and more.

In this case you can use inline binding, as demonstrated in the example below.

Example
    <div id="chart"></div>
    <script>
    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: [200, 450, 300, 125, 100]
        }, {
            name: "Series 2",
            type: "column",
            data: [210, null, 200, 100, null]
        }],
        categoryAxis: {
            categories: ["Mon", "Tue", "Wed", "Thu", "Fri"]
        }
    });
    </script>

The example below demonstrates how to do inline binding with objects.

Example
    <div id="chart"></div>
    <script>
    var seriesData = [
        { day: "Mon", sales1: 200, sales2: 210 },
        { day: "Tue", sales1: 450 },
        { day: "Wed", sales1: 300, sales2: 200 },
        { day: "Thu", sales1: 125, sales2: 100 },
        { day: "Fri", sales1: 100 }
    ];

    $("#chart").kendoChart({
        series: [{
            name: "Series 1",
            type: "column",
            data: seriesData,
            field: "sales1"
        }, {
            name: "Series 2",
            type: "column",
            data: seriesData,
            field: "sales2"
        }],
        categoryAxis: {
            categoryField: "day"
        }
    });
    </script>

Turn Off Animated Transitions

Animated transitions might slow the browser down, especially if the page displays many active charts.

The example below demonstrates how to implement this approach.

Example
    <div id="chart"></div>
    <script>
        $(function() {
            $("#chart").kendoChart({
                series: [{
                    type: "column",
                    data: [1, 2, 3]
                }],
                transitions: false
            });
        });
    </script>

The example below demonstrates how to turn off the initial animation only.

Example
    <div id="chart"></div>
    <script>
      $(function() {
        var src = new kendo.data.ObservableArray([
            { value: 1 }, { value: 2 }
        ]);

        $("#chart").kendoChart({
          dataSource: {
               data: src
          },
          series: [{
              type: "column",
              field: "value"
          }]
        });

        var chart = $("#chart").data("kendoChart");
        chart.options.transitions = false;

        // Subsequent updates won't be animated
        setTimeout(function() {
          src.push({ value: 3 });
        }, 2000);
      });
    </script>

Disable Gradients

Using solid fills instead of gradients noticeably improves performance.

The example below demonstrates how to disable gradients.

Example
    <div id="chart"></div>
    <script>
        $(function() {
            $("#chart").kendoChart({
                seriesDefaults: {
                  overlay: {
                    gradient: null
                  }
                },
                series: [{
                    type: "column",
                    data: [1, 2, 3]
                }],
                transitions: false
            });
        });
    </script>

See Also

Other articles on styling, appearance, and rendering of Kendo UI widgets:

Other articles on troubleshooting:

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

Give article feedback

Tell us how we can improve this article

close
Dummy