Edit this page

Rendering Modes for Data Visualization

The Kendo UI Gauges, Charts, Barcodes, Diagrams, and Maps widgets support the following rendering targets:

  • SVG
  • Canvas

Mode Selection

The rendering mode is automatically chosen based on availability. The order is SVG > Canvas for all widgets rendering data visualization except for the Barcode and QRCode. These components do not require interactivity and default to Canvas rendering. You can set the preferred rendering mode in the renderAs option.

The example below demonstrates how to configure the preferred rendering mode to Canvas by using the renderAs option.

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

Include Only What You Need

The rendering modules are available as separate files:

  • kendo.dataviz.svg(.min).js
  • kendo.dataviz.canvas(.min).js

You must include at least one, the rest are optional.

Important

The Canvas and SVG modules are required by the imageDataURL and svg methods.

For more information on how to add only the functionalities you want to your project, refer to the articles on the JavaScript dependencies and the Custom Download Builder (requires login).

Known Limitations

Some rendering modes impose limitations on the available features. Below is a short list of the known issues.

SVG

  • None

Canvas

  • Dashed lines are not supported in the Internet Explorer.

See Also

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

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

Give article feedback

Tell us how we can improve this article

close
Dummy