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';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryxAxis = { valueType: 'Category' };
}
clickHandler() {
this.chartInstance.print();
}
render() {
return (<div>
<button value='print' onClick={this.clickHandler.bind(this)}>Print</button>
<ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,
ColumnSeries, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}>{
public data: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.print();
}
public primaryxAxis: AxisModel = { valueType: 'Category' };
render() {
return (<div>
<button value='print' onClick={this.clickHandler.bind(this)}>Print</button>
<ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('charts'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-Category Axis</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
<button id= "print" type="button" width ='15%' style="float: right">Print</button>
</body>
</html>The rendered chart can be exported to JPEG , PNG, SVGor PDF format by using export method in chart.
Input parameters for this method are Export Type for format and fileName of result.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
class App extends React.Component {
constructor() {
super(...arguments);
this.data = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
this.primaryxAxis = { valueType: 'Category' };
}
clickHandler() {
this.chartInstance.exportModule.export('PNG', 'sample');
}
render() {
return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
<ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Export, LineSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent></div>);
}
}
;
ReactDOM.render(<App />, document.getElementById('charts'));import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, AxesDirective, AxisDirective, SeriesDirective, Inject,AxisModel,
ColumnSeries, Export, Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, LineSeries, Selection}
from'@syncfusion/ej2-react-charts';
class App extends React.Component<{}, {}>{
public data: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
public chartInstance: ChartComponent;
public clickHandler() {
this.chartInstance.exportModule.export('PNG', 'sample');
}
public primaryxAxis: AxisModel = { valueType: 'Category' };
render() {
return (<div><button value='print' onClick={this.clickHandler.bind(this)}>Export</button>
<ChartComponent id='charts' ref={chart => this.chartInstance = chart} primaryXAxis={this.primaryxAxis}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel,Export, LineSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={this.data} xName='month' yName='sales' type='Column' name='Sales'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent></div>)
}
};
ReactDOM.render(<App />, document.getElementById('charts'));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Chart-Category Axis</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
<button id= "print" type="button" width ='15%' style="float: right">Print</button>
</body>
</html>