Print and Export in React Chart component

05 Oct 2022 / 4 minutes to read

Print

The rendered chart can be printed directly from the browser by calling the public method print. From chart instance itself, it is called.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ];
        this.primaryxAxis = { valueType: 'Category' };
    }
    clickHandler() {
        this.chartInstance.print();
    }
    render() {
        return (<div>
      <button value='print' onClick={this.clickHandler.bind(this)}>Print</button>
      <ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('charts'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #charts {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
        <button id= "print" type="button" width ='15%' style="float: right">Print</button>
</body>
</html>

import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}>{

  public data: any[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
  ];
  public chartInstance: ChartComponent;
  public clickHandler() {
    this.chartInstance.print();
  }
  public primaryxAxis: AxisModel = { valueType: 'Category' };

  render() {
    return (<div>
      <button value='print' onClick={this.clickHandler.bind(this)}>Print</button>
      <ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>)
  }

};
ReactDOM.render(<App />, document.getElementById('charts'));

Export

The rendered chart can be exported to JPEG , PNG, SVGor PDF format by using export method in chart. Input parameters for this method are Export Type for format and fileName of result.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ];
        this.primaryxAxis = { valueType: 'Category' };
    }
    clickHandler() {
        this.chartInstance.exportModule.export('PNG', 'sample');
    }
    render() {
        return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('charts'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #charts {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
        <button id= "print" type="button" width ='15%' style="float: right">Print</button>
</body>
</html>

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,AxisModel,
ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}>{

  public data: any[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
  ];
  public chartInstance: ChartComponent;
  public clickHandler() {
    this.chartInstance.exportModule.export('PNG', 'sample');
  }
  public primaryxAxis: AxisModel = { valueType: 'Category' };

  render() {
    return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel,Export, LineSeries, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>)
  }

};
ReactDOM.render(<App />, document.getElementById('charts'));

Exporting multiple charts

You can export the multiple charts in single page by passing the multiple chart instances to export method of chart.

To export multiple charts in a single page, render more than one chart to export. In button click, call the export method of chart by passing multiple chart objects.

Source

Preview

index.jsx

index.html

index.tsx

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.data = [
            { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ];
        this.data1 = [
            { month: 'jan', sales: 35 }, { month: 'Feb', sales: 28 },
            { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
            { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
            { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
            { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
            { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
        ];
        this.primaryxAxis = { valueType: 'Category' };
    }
    clickHandler() {
        this.chartInstance.exportModule.export('PNG', 'sample', null, [this.chartInstance, this.chartInstance1]);
    }
    render() {
        return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts1' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>
     <ChartComponent id='charts2' ref={chart => this.chartInstance1 = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data1} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent> </div>);
    }
}
;
ReactDOM.render(<App />, document.getElementById('charts'));

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-Category Axis</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #charts {
            height : 350px;
            display: block;
        }
    </style>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
        <button id= "print" type="button" width ='15%' style="float: right">Print</button>
</body>
</html>

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,AxisModel,
ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries,  Selection}
from'@syncfusion/ej2-react-charts';

class App extends React.Component<{}, {}>{

  public data: any[] = [
    { month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
  ];
  public data1: any[] = [
    { month: 'jan', sales: 35 }, { month: 'Feb', sales: 28 },
    { month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
    { month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
    { month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
    { month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
    { month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
  ];
  public chartInstance: ChartComponent;
  public chartInstance1:ChartComponent;
  public clickHandler() { this.chartInstance.exportModule.export('PNG', 'sample', null, [this.chartInstance, this.chartInstance1]);
   }
  public primaryxAxis: AxisModel = { valueType: 'Category' };

  render() {
    return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts1' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel,Export, LineSeries, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>
     <ChartComponent id='charts2' ref={chart => this.chartInstance1 = chart} primaryXAxis={this.primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel,Export, LineSeries, Category]} />
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={this.data1} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent> </div>)
  }

};
ReactDOM.render(<App />, document.getElementById('charts'));

Contents

Print
Export
Exporting multiple charts

Contents

Print
Export
Exporting multiple charts

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!