Export

import { useRef, useState } from "react";
import { LineChart, type ChartHandle, type ExportFormat } from "insightcharts";

const signups = [
  { week: "W1", Organic: 310, Paid: 120 },
  { week: "W2", Organic: 340, Paid: 180 },
  { week: "W3", Organic: 365, Paid: 260 },
  { week: "W4", Organic: 372, Paid: 410 },
  { week: "W5", Organic: 401, Paid: 455 },
  { week: "W6", Organic: 420, Paid: 470 },
];

const formats: ExportFormat[] = ["png", "jpeg", "svg", "pdf", "csv", "json"];

export default function Export() {
  const chart = useRef<ChartHandle>(null);
  const [last, setLast] = useState("");

  async function save(format: ExportFormat) {
    // Downloads the file and resolves to the same Blob.
    const blob = await chart.current!.export({ format });
    setLast(`${format.toUpperCase()} · ${blob.type || "file"} · ${(blob.size / 1024).toFixed(1)} kB`);
  }

  return (
    <div style={{ display: "grid", gap: 16 }}>
      <LineChart ref={chart} data={signups} x="week" y={["Organic", "Paid"]} title="Paid signups rose from 120 in week 1 to 470 in week 6" subtitle="New accounts per week" source="Product analytics" note="Illustrative data" height={260} exportable />
      <div style={{ display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center", fontSize: 13 }}>
        {formats.map((f) => (
          <button key={f} type="button" onClick={() => save(f)} style={{ padding: "4px 12px", borderRadius: 999, border: "1px solid var(--border)" }}>
            {f.toUpperCase()}
          </button>
        ))}
        <span aria-live="polite" style={{ opacity: 0.7 }}>
          {last}
        </span>
      </div>
    </div>
  );
}

Hover the chart (or tab into it) for the built-in menu in the top-right corner, or use the buttons below it, which call the same function through a ref.

The export menu#

exportable adds a small "Export" menu to the figure. true offers PNG, SVG, PDF and CSV; pass an array to choose the formats, in the order you want them listed.

<LineChart exportable ... />
<LineChart exportable={["png", "csv", "json"]} ... />

Set exportable on InsightProvider to turn the menu on for every figure beneath it.

Exporting from code#

A ref on any chart exposes export(options). It triggers a download and resolves to the Blob; pass download: false to get only the blob, for example to upload it.

import { useRef } from "react";
import { LineChart, type ChartHandle } from "insightcharts";

const chart = useRef<ChartHandle>(null);

<LineChart ref={chart} ... />
<button onClick={() => chart.current?.export({ format: "png", pixelRatio: 3 })}>Save PNG</button>

export() rejects if the chart has not rendered yet, which with lazy mounting includes charts that have never been scrolled into view.

What each format contains#

Image exports are rendered off-screen with the right renderer for the format, so the result does not depend on whether the visible chart uses SVG or canvas. They use the colours the chart has on screen, including dark mode.

Whole posters and cards#

A chart export contains one chart. Two kinds of component save a whole designed piece as one PNG, with every chart, heading and source line in it.

<Poster download title="..." panels={panels} />
<Insight spec={{ type: "flow-poster", download: true, ...rest }} />

The control is drawn under the piece and is not part of the image. On the poster frame and the social card, exportWidth sets the width, filename the file name and onExport receives the Blob. See saving a poster as a PNG.

The image is painted from the DOM onto a canvas by rasterize(element, pixelWidth) from insightcharts/core, with no extra dependency. It paints backgrounds including linear and radial gradients, borders, corner radii, clipping, text, inline SVG and canvases. It does not paint outer or blurred shadows, CSS transforms, conic or repeating gradients, or url() background images. An element with the data-ic-export-ignore attribute is left out.

import { canvasToBlob, downloadBlob, rasterize } from "insightcharts/core";

const canvas = await rasterize(element, 2400);
downloadBlob(await canvasToBlob(canvas), "poster.png");

Lower-level helpers#

exportChart, toSvgString, toCanvas and downloadBlob are exported from insightcharts/core for building your own export flow from an ECharts option. rasterize, canvasToBlob and backgroundGradients are exported from the same place for painting DOM to a canvas. The ref also exposes getOption() and getInstance().