Rendering Modes
The Angular Chart supports two rendering modes—SVG and Canvas. SVG is the default mode and works well for most applications, while Canvas is useful when rendering performance has higher priority than zoom and print quality.
Use the following table to choose the rendering mode that matches your scenario.
| Rendering mode | Best for | Tradeoffs |
|---|---|---|
| SVG | General use, sharp browser zoom, and crisp printing. | Can be less efficient than Canvas in large dashboards or frequently refreshed charts. |
| Canvas | Faster updates and lower memory usage in large dashboards or frequently refreshed charts. | Can look blurry on zoom and produce lower print quality. |
SVG remains the default choice for most applications because it preserves visual fidelity during browser zoom and printing. Choose Canvas when faster updates and lower memory usage matter more than zoom and print quality.
Configuring the Rendering Mode
After you choose the rendering mode that matches your scenario, set the renderAs property to svg or canvas on the <kendo-chart> component. If you do not set this property, the Chart renders in SVG mode.
The following snippet shows how to enable Canvas rendering:
<kendo-chart renderAs="canvas">
<!-- chart configuration -->
</kendo-chart>The following example demonstrates a Chart rendered in Canvas mode.
Improving Initial Load Performance
Angular's deferrable views let you delay content rendering based on a trigger such as user interaction, a timer, idle browser state, or the element entering the viewport. For charts below the fold, the viewport trigger is a practical choice—the browser skips chart initialization on load and starts it only when the user scrolls to that section.
Wrap each chart in a @defer (on viewport) block. Use a Skeleton in the @placeholder block to preserve layout, and a Loader in the @loading block to indicate rendering progress.
This pattern is useful when the page contains multiple charts and only some of them are visible during the initial load. It helps reduce startup work without changing the chart configuration itself.
The following example demonstrates five charts in a scrollable dashboard. Scroll down to see each chart load as it enters view.