Chart print in React Chart component

1 Apr 202524 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.

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';
import { data } from './datasource';
function App() {
    const chartInstance;
    function clickHandler() {
        chartInstance.print();
    }
    const primaryxAxis = { valueType: 'Category' };
    return (<div>
      <button value='print' onClick={clickHandler.bind(this)}>Print</button>
      <ChartComponent id='charts' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
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';
import { data } from './datasource';
function App() {
  const chartInstance: ChartComponent;
  function clickHandler() {
    chartInstance.print();
  }
  const primaryxAxis: AxisModel = { valueType: 'Category' };

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

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

Export

The rendered chart can be exported to JPEG, PNG, SVG, PDF, XLSX, or CSV format using the export method in chart. The input parameters for this method are type for format and fileName for result.

The optional parameters for this method are,

  • orientation - either portrait or landscape mode during PDF export,
  • controls - pass collections of controls for multiple export,
  • width - width of chart export, and
  • height - height of chart export.
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';
import { data } from './datasource';
function App() {
    const chartInstance;
    function clickHandler() {
        chartInstance.exportModule.export('PNG', 'sample');
    }
    const primaryxAxis = { valueType: 'Category' };
    return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
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';
import { data } from './datasource';
function App() {
  const chartInstance: ChartComponent;
  function clickHandler() {
    chartInstance.exportModule.export('PNG', 'sample');
  }
  const primaryxAxis: AxisModel = { valueType: 'Category' };

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

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let 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 }
];
export let data: Object[] = [
    { 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 }
];

In the export method, specify the following parameters to add a header and footer text to the exported PDF document:

  • header - Specify the text that should appear at the top of the exported PDF document.
  • footer - Specify the text that should appear at the bottom of the exported PDF document.
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';
import { data } from './datasource';
function App() {
    let chartInstance;
    function clickHandler() {
      const header = {
        content: 'Chart Header',
        fontSize: 15
    };

    const footer = {
        content: 'Chart Footer',
        fontSize: 15,
    };
    chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer);
    }
    const primaryxAxis = {
      title: 'Manager',
      valueType: 'Category',
      majorGridLines: { width: 0 }
    };
    const primaryyAxis = {
      title: 'Sales',
      minimum: 0,
      maximum: 20000,
      majorGridLines: { width: 0 }
    };
    return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Sales Comparision'>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data} xName='x' yName='y' type='Column' width='2'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
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';
import { data } from './datasource';
function App() {

  let chartInstance: ChartComponent;
  function clickHandler() {
    const header = {
        content: 'Chart Header',
        fontSize: 15
    };

    const footer = {
        content: 'Chart Footer',
        fontSize: 15,
    };
    chartInstance.exportModule.export('PDF', 'Chart', 1, [chartInstance], null, null, true, header, footer);
  }
  const primaryxAxis: AxisModel = {
    title: 'Manager',
    valueType: 'Category',
    majorGridLines: { width: 0 }
  };
  const primaryyAxis: AxisModel = {
    title: 'Sales',
    minimum: 0,
    maximum: 20000,
    majorGridLines: { width: 0 }
  };

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

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let data = [
    { x: 'John',  y: 10000 }, 
    { x: 'Jake',  y: 12000 }, 
    { x: 'Peter', y: 18000 },
    { x: 'James', y: 11000 }, 
    { x: 'Mary',  y: 9700 }
];
export let data: Object[] = [
    { x: 'John',  y: 10000 }, 
    { x: 'Jake',  y: 12000 }, 
    { x: 'Peter', y: 18000 },
    { x: 'James', y: 11000 }, 
    { x: 'Mary',  y: 9700 }
];

Exporting charts into separate page during the PDF export

During PDF export, set the exportToMultiplePage parameter to true to export each chart as a separate page.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, DateTime, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { data1, data2, data3, data4 } from './datasource';

function App() {
  let chartInstance;
  let chartInstance1;
  let chartInstance2;
  function clickHandler() {
    chartInstance.exportModule.export('PDF', 'Chart', null, [chartInstance, chartInstance1, chartInstance2], null, null, true, undefined, undefined, true);
  }
  const primaryxAxis = {
    valueType: 'DateTime',
    labelFormat: 'y',
    intervalType: 'Years',
    edgeLabelPlacement: 'Shift',
    majorGridLines: { width: 0 }
  };
  const primaryyAxis = {
    labelFormat: '{value}%',
    rangePadding: 'None',
    minimum: 0,
    maximum: 100,
    interval: 20,
    lineStyle: { width: 0 },
    majorTickLines: { width: 0 },
    minorTickLines: { width: 0 }
  };
  const primaryxAxis1 = {
    title: 'Manager',
    valueType: 'Category',
    majorGridLines: { width: 0 }
  };
  const primaryyAxis1 = {
    title: 'Sales',
    minimum: 0,
    maximum: 20000,
    majorGridLines: { width: 0 }
  };
  const marker = { visible: true, width: 10, height: 10 };
  const datalabel = {
    visible: true,
    name: 'text',
    position: 'Inside',
    font: {
      fontWeight: '600',
      color: '#ffffff'
    }
  };
  const legendSettings = { visible: true };
  return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
    <ChartComponent id='charts1' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Medal Count'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data1} xName='x' yName='y' type='Line' width='2' name='Germany' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={data2} xName='x' yName='y' type='Line' width='2' name='England' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
    <ChartComponent id='charts2' ref={chart => chartInstance1 = chart} primaryXAxis={primaryxAxis1} primaryYAxis={primaryyAxis1} title='Sales Comparision'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data3} xName='x' yName='y' type='Column' width='2'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
    <AccumulationChartComponent id='charts' ref={chart => chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}>
      <Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data4} xName='x' yName='y' type='Pie' dataLabel={datalabel} radius='70%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, AxisModel, DateTime,
  ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries,
}
  from '@syncfusion/ej2-react-charts';
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, PieSeries, AccumulationDataLabel, AccumulationLegend } from '@syncfusion/ej2-react-charts';
import { data1, data2, data3, data4 } from './datasource';

function App() {
  let chartInstance: ChartComponent;
  let chartInstance1: ChartComponent;
  let chartInstance2: ChartComponent;
  function clickHandler() {
    chartInstance.exportModule.export('PDF', 'Chart', null, [chartInstance, chartInstance1, chartInstance2], null, null, true, undefined, undefined, true);
  }
  const primaryxAxis: AxisModel = {
    valueType: 'DateTime',
    labelFormat: 'y',
    intervalType: 'Years',
    edgeLabelPlacement: 'Shift',
    majorGridLines: { width: 0 }
  };
  const primaryyAxis: AxisModel = {
    labelFormat: '{value}%',
    rangePadding: 'None',
    minimum: 0,
    maximum: 100,
    interval: 20,
    lineStyle: { width: 0 },
    majorTickLines: { width: 0 },
    minorTickLines: { width: 0 }
  };
  const primaryxAxis1: AxisModel = {
    title: 'Manager',
    valueType: 'Category',
    majorGridLines: { width: 0 }
  };
  const primaryyAxis1: AxisModel = {
    title: 'Sales',
    minimum: 0,
    maximum: 20000,
    majorGridLines: { width: 0 }
  };
  const marker = { visible: true, width: 10, height: 10 };
  const datalabel = {
    visible: true,
    name: 'text',
    position: 'Inside',
    font: {
      fontWeight: '600',
      color: '#ffffff'
    }
  };
  const legendSettings = { visible: true };

  return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
    <ChartComponent id='charts1' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Medal Count'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category, DateTime]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data1} xName='x' yName='y' type='Line' width='2' name='Germany' marker={marker}>
        </SeriesDirective>
        <SeriesDirective dataSource={data2} xName='x' yName='y' type='Line' width='2' name='England' marker={marker}>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
    <ChartComponent id='charts2' ref={chart => chartInstance1 = chart} primaryXAxis={primaryxAxis1} primaryYAxis={primaryyAxis1} title='Sales Comparision'>
      <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]} />
      <SeriesCollectionDirective>
        <SeriesDirective dataSource={data3} xName='x' yName='y' type='Column' width='2'>
        </SeriesDirective>
      </SeriesCollectionDirective>
    </ChartComponent>
    <AccumulationChartComponent id='charts' ref={chart => chartInstance2 = chart} title='Project Cost Breakdown' enableSmartLabels='true' legendSettings={legendSettings}>
      <Inject services={[PieSeries, AccumulationDataLabel, AccumulationLegend]} />
      <AccumulationSeriesCollectionDirective>
        <AccumulationSeriesDirective dataSource={data4} xName='x' yName='y' type='Pie' dataLabel={datalabel} radius='70%'>
        </AccumulationSeriesDirective>
      </AccumulationSeriesCollectionDirective>
    </AccumulationChartComponent></div>)

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let data1 = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 },
    { x: new Date(2011, 0, 1), y: 70 }
];

export let data2 = [
    { x: new Date(2005, 0, 1), y: 28 }, 
    { x: new Date(2006, 0, 1), y: 44 },
    { x: new Date(2007, 0, 1), y: 48 }, 
    { x: new Date(2008, 0, 1), y: 50 },
    { x: new Date(2009, 0, 1), y: 66 }, 
    { x: new Date(2010, 0, 1), y: 78 },
    { x: new Date(2011, 0, 1), y: 84 }
];

export let data3 = [
    { x: 'John',  y: 10000 }, 
    { x: 'Jake',  y: 12000 }, 
    { x: 'Peter', y: 18000 },
    { x: 'James', y: 11000 }, 
    { x: 'Mary',  y: 9700 }
];

export let data4 = [
    { x: 'Labour',     y: 18, text: '18%' }, 
    { x: 'Legal',      y: 8,  text: '8%' },
    { x: 'Production', y: 15, text: '15%' }, 
    { x: 'License',    y: 11, text: '11%' },
    { x: 'Facilities', y: 18, text: '18%' }, 
    { x: 'Taxes',      y: 14, text: '14%' },
    { x: 'Insurance',  y: 16, text: '16%' }
];
export let data1: Object[] = [
    { x: new Date(2005, 0, 1), y: 21 }, 
    { x: new Date(2006, 0, 1), y: 24 },
    { x: new Date(2007, 0, 1), y: 36 }, 
    { x: new Date(2008, 0, 1), y: 38 },
    { x: new Date(2009, 0, 1), y: 54 }, 
    { x: new Date(2010, 0, 1), y: 57 },
    { x: new Date(2011, 0, 1), y: 70 }
];

export let data2: Object[] = [
    { x: new Date(2005, 0, 1), y: 28 }, 
    { x: new Date(2006, 0, 1), y: 44 },
    { x: new Date(2007, 0, 1), y: 48 }, 
    { x: new Date(2008, 0, 1), y: 50 },
    { x: new Date(2009, 0, 1), y: 66 }, 
    { x: new Date(2010, 0, 1), y: 78 },
    { x: new Date(2011, 0, 1), y: 84 }
];

export let data3: Object[] = [
    { x: 'John',  y: 10000 }, 
    { x: 'Jake',  y: 12000 }, 
    { x: 'Peter', y: 18000 },
    { x: 'James', y: 11000 }, 
    { x: 'Mary',  y: 9700 }
];

export let data4: Object[] = [
    { x: 'Labour',     y: 18, text: '18%' }, 
    { x: 'Legal',      y: 8,  text: '8%' },
    { x: 'Production', y: 15, text: '15%' }, 
    { x: 'License',    y: 11, text: '11%' },
    { x: 'Facilities', y: 18, text: '18%' }, 
    { x: 'Taxes',      y: 14, text: '14%' },
    { x: 'Insurance',  y: 16, text: '16%' }
];

Multiple chart export

You can export the multiple charts in single page by passing the multiple chart objects in the export method of chart. To export multiple charts in a single page, follow the given steps:

Initially, render more than one chart to export, and then add button to export the multiple charts. In button click, call the export method in charts, and then pass the multiple chart objects in the export method.

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';
import { data, data1 } from './datasource';
function App() {
    const chartInstance;
    const chartInstance1;
    function clickHandler() {
        chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]);
    }
    const primaryxAxis = { valueType: 'Category' };
    return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts1' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent>
     <ChartComponent id='charts2' ref={chart => chartInstance1 = chart} primaryXAxis={primaryxAxis}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data1} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent> </div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
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';
import { data, data1 } from './datasource';
function App() {

  const chartInstance: ChartComponent;
  const chartInstance1:ChartComponent;
  function clickHandler() { chartInstance.exportModule.export('PNG', 'sample', null, [chartInstance, chartInstance1]);
   }
  const primaryxAxis: AxisModel = { valueType: 'Category' };

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

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let 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 }
];

export let 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 }
];
export let data: Object[] = [
    { 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 }
];

export let data1: Object[] = [
    { 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 }
];

Exporting chart using base64 string

The chart can be exported as an image in the form of a base64 string by utilizing HTML canvas. This process involves rendering the chart onto a canvas element and then converting the canvas content to a base64 string.

import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
    let chartInstance;
    function clickHandler() {
      var svg = document.querySelector("#charts_svg");
      var svgData = new XMLSerializer().serializeToString(svg);
      var canvas = document.createElement("canvas");
      document.body.appendChild(canvas);
      var svgSize = svg.getBoundingClientRect();
      canvas.width = svgSize.width;
      canvas.height = svgSize.height;
      var ctx = canvas.getContext("2d");
      var img = document.createElement("img");
      img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
        var imagedata = canvas.toDataURL("image/png");
        console.log(imagedata); // printed base64 in console
        canvas.remove();
      };
    }
    return (<div><ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ 
      valueType: 'Category',
      majorGridLines: { width: 0 },
      majorTickLines: { width: 0 },
      minorTickLines: { width: 0 } 
  }} primaryYAxis={{ 
     minimum: 0,
     maximum: 40,
     interval: 10,
     lineStyle: {width : 0},
     minorTickLines: {width: 0},
     majorTickLines: {width : 0},
  }} chartArea={{ border: { width: 0 } }}>
     <Inject services={[ColumnSeries, Category]}/>
     <SeriesCollectionDirective>                        
         <SeriesDirective dataSource={data} xName="x" yName="y" type="Column"></SeriesDirective>
     </SeriesCollectionDirective>
  </ChartComponent>
  
  <button value='Export' onClick={clickHandler.bind(this)}>Export</button></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  let chartInstance: ChartComponent;
  function clickHandler() { 
    var svg = document.querySelector("#charts_svg");
        var svgData = new XMLSerializer().serializeToString(svg);
        var canvas = document.createElement("canvas");
        document.body.appendChild(canvas);
        var svgSize = svg.getBoundingClientRect();
        canvas.width = svgSize.width;
        canvas.height = svgSize.height;
        var ctx = canvas.getContext("2d");
        var img = document.createElement("img");
        img.setAttribute("src", "data:image/svg+xml;base64," + btoa(svgData));
        img.onload = function() {
          ctx.drawImage(img, 0, 0);
          var imagedata = canvas.toDataURL("image/png");
          console.log(imagedata); // printed base64 in console
          canvas.remove();
        };
   }
  return (<div> <ChartComponent id="charts" style={{ textAlign: 'center' }} primaryXAxis={{ 
    valueType: 'Category',
    majorGridLines: { width: 0 },
    majorTickLines: { width: 0 },
    minorTickLines: { width: 0 } 
}} primaryYAxis={{ 
   minimum: 0,
   maximum: 40,
   interval: 10,
   lineStyle: {width : 0},
   minorTickLines: {width: 0},
   majorTickLines: {width : 0},
}} chartArea={{ border: { width: 0 } }}>
   <Inject services={[ColumnSeries, Category]}/>
   <SeriesCollectionDirective>                        
       <SeriesDirective dataSource={data} xName="x" yName="y" type="Column"></SeriesDirective>
   </SeriesCollectionDirective>
</ChartComponent>

<button value='Export' onClick={clickHandler.bind(this)}>Export</button></div>)

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let data = [
    { x: 'DEU', y: 35.5 }, 
    { x: 'CHN', y: 18.3 }, 
    { x: 'ITA', y: 17.6 }, 
    { x: 'JPN', y: 13.6 },
    { x: 'US',  y: 12 }, 
    { x: 'ESP', y: 5.6 }, 
    { x: 'FRA', y: 4.6 }, 
    { x: 'AUS', y: 3.3 },
    { x: 'BEL', y: 3 }, 
    { x: 'UK',  y: 2.9 }
];
export let data: Object[] = [
    { x: 'DEU', y: 35.5 }, 
    { x: 'CHN', y: 18.3 }, 
    { x: 'ITA', y: 17.6 }, 
    { x: 'JPN', y: 13.6 },
    { x: 'US',  y: 12 }, 
    { x: 'ESP', y: 5.6 }, 
    { x: 'FRA', y: 4.6 }, 
    { x: 'AUS', y: 3.3 },
    { x: 'BEL', y: 3 }, 
    { x: 'UK',  y: 2.9 }
];

Excel export

You can export the rendered chart data to Excel in either XLSX or CSV format. The excelProperties property in the beforeExport event allows users to customize the exported Excel sheet by modifying row, column, and cell properties before the file is generated. You can customize row titles, column titles, cell values, as well as row and column widths.

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';
import { data } from './datasource';
function App() {
    const chartInstance;
    const beforeExportEvent = (args) => {
      args.excelProperties.rows[0].cells[0].value = 'Changed Title';
      args.excelProperties.rows[1].cells[0].value = 'X Title';
      args.excelProperties.rows[1].cells[1].value = 'Y Title';
      args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2;
  };
    function clickHandler() {
        chartInstance.exportModule.export('PNG', 'sample');
    }
    const primaryxAxis = { valueType: 'Category' };
    return (<div><button value='print' onClick={clickHandler.bind(this)}>Export</button>
      <ChartComponent id='charts' ref={chart => chartInstance = chart} primaryXAxis={primaryxAxis} beforeExport = {beforeExportEvent}>
        <Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
        <SeriesCollectionDirective>
          <SeriesDirective dataSource={data} xName='month' yName='sales' type='Column' name='Sales'>
          </SeriesDirective>
        </SeriesCollectionDirective>
      </ChartComponent></div>);
}
;
export default App;
ReactDOM.render(<App />, document.getElementById('charts'));
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, IExportEventArgs, Selection}
from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
  const chartInstance: ChartComponent;
  const beforeExportEvent = (args: IExportEventArgs): void => {
    args.excelProperties.rows[0].cells[0].value = 'Changed Title';
    args.excelProperties.rows[1].cells[0].value = 'X Title';
    args.excelProperties.rows[1].cells[1].value = 'Y Title';
    args.excelProperties.rows[2].cells[1].value = args.excelProperties.rows[2].cells[1].value + 2;
};
  function clickHandler() {
    chartInstance.exportModule.export('XLSX', 'sample');
  }
  const primaryxAxis: AxisModel = { valueType: 'Category' };

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

};
export default App;
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
        <div id='charts'>
            <div id='loader'>Loading....</div>
        </div>
</body>
</html>
export let 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 }
];
export let data: Object[] = [
    { 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 }
];