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';
function App() {
const 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 }
];
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'));
<!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>
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';
function App() {
const 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 }
];
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'));
The rendered chart can be exported to JPEG
, PNG
, SVG
or PDF
format by using export method in chart.
Input parameters for this method are Export Type
for format and fileName
of result.
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';
function App() {
const 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 }
];
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'));
<!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>
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';
function App() {
const 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 }
];
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'));
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.
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';
function App() {
const 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 }
];
const 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 }
];
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'));
<!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>
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';
function App() {
const 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 }
];
const 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 }
];
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'));