Print and Export in React Chart

25 Aug 202624 minutes to read

Print

You can print the rendered chart directly from the browser by calling the public print method. The method accepts an optional array of element IDs or HTMLElement references to include in the print output. By default, the print method prints the chart element itself.

Method signature

chartInstance.print(ids?: string[] | HTMLElement[]);
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() {
    let 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() {
  let 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>
</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

You can export the rendered chart to JPEG, PNG, SVG, PDF, XLSX, or CSV using the chart’s export method. To use the export feature, inject the Export module into the chart’s services array (as shown in the samples below).

Method signature

chartInstance.exportModule.export(
  type: 'PNG' | 'JPEG' | 'SVG' | 'PDF' | 'XLSX' | 'CSV',
  fileName: string,
  orientation?: 'portrait' | 'landscape',
  controls?: ChartModel[],
  width?: number,
  height?: number,
  isMultiplePage?: boolean,
  header?: PdfHeaderFooterContent,
  footer?: PdfHeaderFooterContent,
  exportToMultiplePage?: boolean
);

Parameters

Parameter Type Description
type string The export format. Valid values: PNG, JPEG, SVG, PDF, XLSX, CSV.
fileName string The name of the downloaded file (without extension).
orientation string The page orientation for PDF export. Valid values: portrait, landscape.
controls ChartModel[] An array of chart instances for multi-control export to a single page.
width number The width of the exported image or PDF, in pixels.
height number The height of the exported image or PDF, in pixels.
isMultiplePage boolean When true, exports each chart in controls to a separate page (PDF only).
header PdfHeaderFooterContent Header content for the exported PDF.
footer PdfHeaderFooterContent Footer content for the exported PDF.
exportToMultiplePage boolean When true, exports each chart in controls to a separate page (PDF only). 
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() {
        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() {
  let 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>
</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 }
];

Use the header and footer parameters of the export method to add header and footer text to the exported PDF document. Each parameter accepts a PdfHeaderFooterContent object with the following properties:

  • content — The text that appears at the top (header) or bottom (footer) of the exported PDF document.
  • fontSize — The font size of the header or footer text.
  • fontFamily — (Optional) The font family for the text.
  • color — (Optional) The color of the text.
  • x, y — (Optional) The position of the text in the PDF.
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', 'portrait', [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', 'portrait', [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>
</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 to Separate Pages in PDF

During PDF export, set the exportToMultiplePage parameter to true to export each chart to a separate page in the resulting PDF document. The chart instances are passed in the controls array.

Note: Each chart in the controls array must also have the Export module injected in its services array for multi-page export to work.

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>
</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 multiple charts to a single page by passing an array of chart objects to the chart’s export method. Follow these steps:

  1. Render more than one chart on the page.
  2. Add a button to trigger the export.
  3. In the button’s click handler, call the export method on the first chart instance, passing the additional chart instances in the controls array.
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() {
    let chartInstance;
    let 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() {

  let chartInstance: ChartComponent;
  let 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>
</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 a Base64 String

Note: This is a custom approach that uses an HTML canvas. The built-in export method does not return a 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>
</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 chart data in XLSX or CSV format by setting the type parameter of the export method to XLSX or CSV. The excelProperties property in the beforeExport event allows you to customize the exported sheet before the file is generated. You can modify row titles, column titles, cell values, and row or column widths.

Note: The beforeExport event fires for all export formats, but excelProperties is only populated when type is XLSX or CSV. The Export module must be injected.

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;
    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('XLSX', '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() {
  let 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>
</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 }
];