Export Options

The Chart provides support for Image, PDF, and SVG export using the [Drawing]({%slug overview_drawing %}) package.

As a result, you can send a Base64-encoded file to a service or save it on the client machine by using the File Saver package.

The Chart supports the following options:

Exporting to Drawing Visuals

In order to export a Chart component as a Drawing scene use the exportVisual method and pass a Chart instance and export options.

The following example demonstrates how to export the Chart as a Drawing visual scene by using the exportVisual method.

Example
View Source
Edit In Stackblitz  
Change Theme:

Exporting to Images

Once the Chart is exported as Drawing scene, the following example demonstrates how to save this visual as PNG image using the exportImage method of the [Drawing]({%slug overview_drawing %}) package.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    exportVisual
} from '@progress/kendo-react-charts';

import { exportImage } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.onImageExportClick}>Export as Image</button>
                <Chart ref={(cmp) => this._chart = cmp}>
                    <ChartCategoryAxis>
                        <ChartCategoryAxisItem categories={[2015, 2016, 2017, 2018]} />
                    </ChartCategoryAxis>
                    <ChartSeries>
                        <ChartSeriesItem data={[110, 230, 200, 78]} />
                    </ChartSeries>
                </Chart>
            </div>
        );
    }

    onImageExportClick = () => {
      const chartVisual = exportVisual(this._chart);

      if (chartVisual) {
          exportImage(chartVisual).then(dataURI => saveAs(dataURI, 'chart.png'));
      }
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

By default, the exported image is of the same size as the Chart DOM element. If required, you can export the file to a different resolution. If you change the image size, the image quality will not be affected because the rendering of the Chart is based on vector graphics.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    exportVisual
} from '@progress/kendo-react-charts';

import { exportImage } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.onImageExportClick}>Export as Image</button>
                <Chart ref={(cmp) => this._chart = cmp}>
                    <ChartCategoryAxis>
                        <ChartCategoryAxisItem categories={[2015, 2016, 2017, 2018]} />
                    </ChartCategoryAxis>
                    <ChartSeries>
                        <ChartSeriesItem data={[110, 230, 200, 78]} />
                    </ChartSeries>
                </Chart>
            </div>
        );
    }

    onImageExportClick = () => {
      const chartVisual = exportVisual(this._chart);

      if (chartVisual) {
          exportImage(chartVisual, {
            width: 1200,
            height: 800
          }).then(dataURI => saveAs(dataURI, 'chart.png'));
      }
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Exporting to PDF

The exportPDF method from the Drawing library takes a visual element and produces a PDF file out of it.

Saving Charts in PDF

The following example demonstrates how to save the Chart as a PDF file by using the exportPDF method.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    exportVisual
} from '@progress/kendo-react-charts';

import { exportPDF } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.onPDFExportClick}>Export as PDF</button>
                <Chart ref={(cmp) => this._chart = cmp}>
                    <ChartCategoryAxis>
                        <ChartCategoryAxisItem categories={[2015, 2016, 2017, 2018]} />
                    </ChartCategoryAxis>
                    <ChartSeries>
                        <ChartSeriesItem data={[110, 230, 200, 78]} />
                    </ChartSeries>
                </Chart>
            </div>
        );
    }

    onPDFExportClick = () => {
      const chartVisual = exportVisual(this._chart);

      if (chartVisual) {
          exportPDF(chartVisual, {
             paperSize: "A4",
             landscape: true
          }).then(dataURI => saveAs(dataURI, 'chart.pdf'));
      }
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Fitting Charts to Paper Size

If the rendered Chart is bigger than the exported PDF paper size, then the Chart is clipped. To avoid this behavior, either:

  • Set the exportVisual size, or
  • Scale the drawing element which is returned by the exportVisual method.

The following example demonstrates how to fit the exported Chart to the paper size of the PDF file.

import { saveAs } from '@progress/kendo-file-saver';
import { exportPDF } from '@progress/kendo-drawing/pdf';
import { Rect } from '@progress/kendo-drawing/geometry';
import { fit, Group } from '@progress/kendo-drawing';

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    exportVisual
} from '@progress/kendo-react-charts';

const mm = (val) => (val * 2.8347);
const PAGE_RECT = new Rect([0, 0], [mm(210 - 20), mm(297 - 20)]);

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.exportScaledChart}>Export as PDF(scаle)</button>
                <button className="k-button" onClick={this.exportSizedChart}>Export as PDF(size)</button>
                <Chart ref={(cmp) => this._chart = cmp}>
                    <ChartCategoryAxis>
                        <ChartCategoryAxisItem categories={[2015, 2016, 2017, 2018]} />
                    </ChartCategoryAxis>
                    <ChartSeries>
                        <ChartSeriesItem data={[110, 230, 200, 78]} />
                    </ChartSeries>
                </Chart>
            </div>
        );
    }

    exportSizedChart = () => {
      const visual = exportVisual(this._chart, {
        width: PAGE_RECT.size.width
      });

      this.exportElement(visual);
    }

    exportScaledChart = () => {
      const visual = exportVisual(this._chart);
      const content = new Group();

      content.append(visual);
      fit(content, PAGE_RECT);

      this.exportElement(content);
    }

    exportElement(element) {
      exportPDF(element, {
        paperSize: "A4",
        margin: "1cm"
      }).then((dataURI) => {
        saveAs(dataURI, 'chart.pdf');
      });
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);

Exporting to SVG

Once the Chart is exported as Drawing scene, the following example demonstrates how to save this visual as an SVG using the exportSVG method of the [Drawing]({%slug overview_drawing %}) package.

import {
    Chart,
    ChartSeries,
    ChartSeriesItem,
    ChartCategoryAxis,
    ChartCategoryAxisItem,
    exportVisual
} from '@progress/kendo-react-charts';

import { exportSVG } from '@progress/kendo-drawing';
import { saveAs } from '@progress/kendo-file-saver';

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.onSVGExportClick}>Export as SVG</button>
                <Chart ref={(cmp) => this._chart = cmp}>
                    <ChartCategoryAxis>
                        <ChartCategoryAxisItem categories={[2015, 2016, 2017, 2018]} />
                    </ChartCategoryAxis>
                    <ChartSeries>
                        <ChartSeriesItem data={[110, 230, 200, 78]} />
                    </ChartSeries>
                </Chart>
            </div>
        );
    }

    onSVGExportClick = () => {
      const chartVisual = exportVisual(this._chart);

      if (chartVisual) {
          exportSVG(chartVisual).then(dataURI => saveAs(dataURI, 'chart.svg'));
      }
    }
}

ReactDOM.render(
    <ChartContainer />,
    document.querySelector('my-app')
);