amCharts 5.21: SVG rendering, and SVG export for every chart

amCharts 5 now has two rendering engines. Charts draw on canvas by default, as before, or as SVG with a single setting. And every chart can now be exported to SVG.

Two rendering engines

To draw a chart as SVG, set renderer when you create the root element:

const root = am5.Root.new("chartdiv", {
  renderer: am5.SVGRenderer
});

To make SVG the default for every chart on the page, set it before creating any root:

am5.Root.defaultRenderer = am5.SVGRenderer;

An SVG chart is part of the page’s DOM, so you can inspect it in dev tools, and it stays sharp at any zoom level.

Renderer documentation

Same chart, either way

Both engines produce the same output. The rest of the chart code stays as it is: same settings, same API. Text is measured the same way, so labels wrap and truncate identically, and tooltips, zoom, drag and every other interaction work as usual.

The one difference: blend modes DST_OVER, SRC_ATOP and XOR are canvas-only. In SVG they are drawn as normal, with a warning in the console.

Switch between the two below:

See the Pen amCharts 5: Canvas and SVG renderers by amCharts (@amcharts) on CodePen.

Export any chart to SVG

Until now, chart images could only be exported as bitmaps (PNG, JPG). The Exporting plugin now exports SVG too, whichever engine draws the chart: canvas or SVG.

“SVG” is in the export menu by default. From code:

exporting.download("svg");

exporting.getSVG().then(function(svg) {
  // SVG markup as a string
});

Without the plugin, am5.renderToSVG(root) returns the chart as SVG markup. Pass an element instead of the root to export just that element.

Text in an exported SVG stays text, so it can be edited in design tools like Illustrator or Figma.

SVG export documentation

Get amCharts 5.21

• npm: npm install @amcharts/amcharts5
• amCharts CDN: https://cdn.amcharts.com/lib/5/index.js, or a fixed version: https://cdn.amcharts.com/lib/version/5.21.0/index.js
• cdnjs: https://cdnjs.cloudflare.com/ajax/libs/amcharts5/5.21.0/index.js
• jsDelivr: https://cdn.jsdelivr.net/gh/amcharts/amcharts5-dist@5/index.js
• ZIP download: amcharts.com/dl/amcharts5
• Source: GitHub

All options: amcharts.com/download

Everything else in 5.21: changelog