Chart Export

The export function is an instance method that generates a static image of the chart (or its current view) in PNG, JPG, SVG or PDF, which can be useful for presenting, sharing, printing or keeping digital records of your charts.

To learn more, head over to the Export examples and the export API.

Image Export

The export method supports images in raster (PNG, JPEG) and vector (SVG) format.

const MyFunctionalComponent = (props) => {
  const { items } = props;
  const chartRef = React.useRef(null);

  const downloadImage = () => {
    chartRef.current.export({ type: 'svg' }).then((exportedImage) => {
      exportedImage.download('regraph_image');
    });
  };

  return (
    <>
      <Chart ref={chartRef} items={items} />
      <button onClick={downloadImage}>
        Download image
      </button>
    </>
  );
};

For PNG and JPG, the maximum resolution that can be exported depends on the device/OS/browser and available memory. For all formats, the maximum size of the output should not exceed 100 megapixels.

If you are exporting into SVG and your charts include multiple different SVG images, make sure that SVG elements such as mask or pattern that have id property specified do not use duplicate ids between different SVG images.

PDF Export

PDF is the only output format that requires dependencies for export to work correctly. You need to add these dependencies to your project and import them in your app before you start exporting.

ReGraph supports PDF export in all modern browsers.

You can customize the PDF output by passing any PDFKit options for PDFDocument in the doc property, or even by passing your own PDFKit document.

When passing in a custom PDFKit doc to the export function, the download function cannot be used to download the PDF. You need to write your own download function. Learn more in the PDF Report example.

Note that PDFKit supports 128 ASCII characters by default. To export non-ASCII characters, you need to embed your own font resources.