Export Options

The Chart provides support for Image, PDF, and SVG export using the 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.

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

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

class ChartContainer extends React.Component {
    _chart;

    render() {
        return (
            <div>
                <button className="k-button" onClick={this.onExportVisual}>Export as visual element</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>
        );
    }

    onExportVisual = () => {
      const chartVisual = exportVisual(this._chart);
      const center = chartVisual.bbox().center();

      // Rotate 45 degrees around center
      chartVisual.transform(transform().rotate(45, center));

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

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

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 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 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')
);
 /