SVGRenderer

Type classSince 5.21.0

Draws charts as a live SVG document instead of canvases.

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

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

All layers are in one <svg> element. Hit testing is geometric (no hidden canvas); text is measured with an in-page canvas, so it wraps and truncates exactly as with CanvasRenderer. Image export paints the same scene with an offscreen CanvasRenderer.

Blend modes DST_OVER, SRC_ATOP and XOR are canvas-only: SVG draws them as NORMAL.

More info: Root element: rendererrmation

Sources

SVGRenderer can be used (imported) via one of the following packages.

TypeScript

// Import SVGRenderer
import * as am5 from "@amcharts/amcharts5";

// Create SVGRenderer
am5.SVGRenderer.new(root, {
  // ... config if applicable
});

JavaScript

<!-- Load SVGRenderer -->
<script src="index.js"></script>

<script>
// Create SVGRenderer
am5.SVGRenderer.new(root, {
  // ... config if applicable
});
</script>

Inheritance

SVGRenderer extends ArrayDisposer.

SVGRenderer is not extended by any other symbol.

Properties

SVGRenderer does not have any properties.

Methods

2 inherited items

#dispose()

Returns voidInherited from DisposerClass

Disposes the object.

#isDisposed()

Returns booleanInherited from DisposerClass

Checks if object is disposed.

Events

SVGRenderer does not have any events.