Rendering Modes
The Angular Chart supports two modes for rendering its data—Canvas (bitmap) and SVG (vector graphics).
Basics
By default, the Chart delivers its data in SVG. You can navigate between the rendering modes and modify them by setting the renderAs property.
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 Angular 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.
Deferring Charts on Viewport
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.
The following example demonstrates five charts in a scrollable dashboard. Scroll down to see each chart load as it enters view.