All Components

Rendering Modes

The Chart supports 2 rendering modes—Canvas (bitmap) and SVG (vector graphics).

By default, the Chart uses SVG. It is possible to navigate between the rendering modes by setting the renderAs property.

The following example demonstrates how to use the Canvas rendering.

    selector: 'my-app',
    template: `
        <kendo-chart renderAs="canvas">
          <kendo-chart-title text="Sample Chart"></kendo-chart-title>
            <kendo-chart-series-item [data]="seriesData">
class AppComponent {
    private seriesData: number[] = [1, 2, 3, 5];

When to Use SVG

The default SVG rendering mode is recommended for general use.

Using vector graphics ensures that:

  • The browser zoom does not degrade the image.
  • The prints are crisp regardless of the resolution.

When to Use Canvas

When performance is critical—when rendering large dashboards and frequently updated charts—it is recommended to use Canvas.

The browser does not have to maintain a live DOM tree for the Chart which results in:

  • Quicker screen updates.
  • Lower memory usage.

On the downside, rendering to a fixed resolution bitmap results in:

  • Blurry images on zoom.
  • Poor print quality.
In this article