Get Started: Tutorials, Examples > Worked Examples > How to: Export an Image From Chart
How to: Export an Image From Chart


SciChart.js Forums: How do you export or save a chart as an image in JS library?

Fairly simple question: How do you export or save a chart as an image in the SciChart.js JavaScript Chart library?


Read the discussion at SciChart.js Forum: How do you export or save a chart as an image in JS library?

Full Solution

We posted a solution on Github here.

This example uses dom-to-image npm module to export the chart to PNG image. This package exports html (used for legends), svg (used for annotations) and canvas (used everything else) elements.

To download the image we use the file-saver module.

For the export to work correctly position: relative should be set on the chart root element.
<!-- Html -->
<html lang="en-us">
    <meta charset="utf-8" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Demo VS Code TypeScript Debugging</title>
    <script async type="text/javascript" src="bundle.js"></script>
      body {
        font-family: "Arial";
    <h1>Export Chart to Image Demo</h1>
    <p>Click buttons to export the chart as PNG. <br/>Drag the pulsing green CustomAnnotation and export again.</p>
    <div style="margin-bottom: 10px; display: flex">
      <button id="export_append">Generate PNG and append</button>
      <button id="export_download" style="margin-left: 6px">Download PNG</button>
    <!-- the Div where the SciChartSurface will reside -->
    <div id="scichart-root" style="width: 800px; height: 600px; position: relative"></div>
    <div id="export_image_result" style="margin-top: 10px"></div>

// JavaScript
const { sciChartSurface, wasmContext } = await SciChartSurface.create(chartDivId);
// Create an X,Y Axis and add to the chart
const xAxis = new NumericAxis(wasmContext);
const yAxis = new NumericAxis(wasmContext, {
    axisAlignment: EAxisAlignment.Left,
    labelStyle: { color: 'white' },
    visibleRange: new NumberRange(0, 8)
const customAnnotation1 = new CustomAnnotation({
    x1: 3,
    y1: 6,
    isEditable: true,
    xCoordShift: 0,
    yCoordShift: 0,
    horizontalAnchorPoint: EHorizontalAnchorPoint.Center,
    verticalAnchorPoint: EVerticalAnchorPoint.Center,
    svgString: `<svg id="two" width="50" height="50"  xmlns="">
            <rect width="100%" height="100%" style="fill:#00ff00"><animate attributeName="rx" values="0;25;0" dur="2s" repeatCount="indefinite" /></rect>
const lineSeries1 = new FastLineRenderableSeries(wasmContext, {
    stroke: 'white',
    dataSeries: new XyDataSeries(wasmContext, {
        xValues: [1, 2, 3, 4, 5],
        yValues: [3, 4, 3, 4, 3],
        dataSeriesName: 'white series'
sciChartSurface.chartModifiers.add(new MouseWheelZoomModifier(), new ZoomExtentsModifier(), new LegendModifier());
document.getElementById('export_append').addEventListener('click', () => {
        .then(function(dataUrl: any) {
            const img = new Image();
            img.src = dataUrl;
            const resElement = document.getElementById('export_image_result');
            resElement.innerHTML = '';
        .catch(function(error: any) {
            console.error('oops, something went wrong!', error);
document.getElementById('export_download').addEventListener('click', () => {
    domtoimage.toBlob(document.getElementById(chartDivId)).then(function(blob: any) {
        saveAs(blob, 'scichart.png');

This results in the following output

Further Reading

This example makes use of the dom-to-image package on npm. This is a library which turns arbitrary DOM node into a vector (SVG) or raster (PNG, JPEG) image.

The npm package file-saver is used to save an in-memory image to PNG or JPEG file.