Chart appearance in React Chart component
19 Dec 202424 minutes to read
Custom color palette
You can customize the default color of series or points by providing a custom color palette of your choice by using the palettes property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const palette = ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"];
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} palettes={palette} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column' name='Silver' legendShape='Rectangle'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze' legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const palette: string[] = ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"];
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
palettes={palette}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
legendShape='Circle' type='Column'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='silver' type='Column'
name='Silver' legendShape='Rectangle'>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='country' yName='bronze' name='Bronze'
legendShape='Rectangle' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];export let data: Object[] = [
{ country: "USA", gold: 50, silver: 70, bronze: 45 },
{ country: "China", gold: 40, silver: 60, bronze: 55 },
{ country: "Japan", gold: 70, silver: 60, bronze: 50 },
{ country: "Australia", gold: 60, silver: 56, bronze: 40 },
{ country: "France", gold: 50, silver: 45, bronze: 35 },
{ country: "Germany", gold: 40, silver: 30, bronze: 22 },
{ country: "Italy", gold: 40, silver: 35, bronze: 37 },
{ country: "Sweden", gold: 30, silver: 25, bronze: 27 }
];Data point customization
The color of individual data point or data points within a range can be customized using the options below.
Point color mapping
You can bind the color for the points from dataSource for the series using pointColorMapping property.
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() {
return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C' }} title="USA CLIMATE - WEATHER BY MONTH" chartArea={{ border: { width: 0 } }}>
<Inject services={[ColumnSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective pointColorMapping="color" dataSource={data} name='USA' xName='x' yName='y' type='Column' animation={{ enable: false }} cornerRadius={{
topLeft: 10, topRight: 10
}}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
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, Selection, Legend, RangeColorSettingsDirective, RangeColorSettingDirective } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
return <ChartComponent id='charts' primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C' }} title="USA CLIMATE - WEATHER BY MONTH" chartArea={{ border: { width: 0 } }}>
<Inject services={[ColumnSeries, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective pointColorMapping="color" dataSource={data} name='USA' xName='x' yName='y' type='Column' animation={{ enable: false }} cornerRadius={{
topLeft: 10, topRight: 10
}}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: 'Jan', y: 6.96, color: "red" },
{ x: 'Feb', y: 8.9, color: "blue" },
{ x: 'Mar', y: 12, color: "orange" },
{ x: 'Apr', y: 17.5, color: "aqua" },
{ x: 'May', y: 22.1, color: "grey" }
];export let data: Object[] = [
{ x: 'Jan', y: 6.96, color: "red" },
{ x: 'Feb', y: 8.9, color: "blue" },
{ x: 'Mar', y: 12, color: "orange" },
{ x: 'Apr', y: 17.5, color: "aqua" },
{ x: 'May', y: 22.1, color: "grey" }
];Range color mapping
You can differentiate data points based on their y values using rangeColorSettings in the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Selection, Legend, RangeColorSettingsDirective, RangeColorSettingDirective } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const color1 = ['#F9D422'];
const color2 = ['#F28F3F'];
const color3 = ['#E94F53'];
return <ChartComponent id='charts' style={{ textAlign: "center" }} selectionMode='Point' primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C' }} title="USA CLIMATE - WEATHER BY MONTH" chartArea={{ border: { width: 0 } }} legendSettings={{
mode: 'Range',
visible: true,
toggleVisibility: false
}}>
<Inject services={[ColumnSeries, Selection, Category, Legend]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} name='USA' xName='x' yName='y' type='Column' animation={{ enable: false }} cornerRadius={{
topLeft: 10, topRight: 10
}}>
</SeriesDirective>
</SeriesCollectionDirective>
<RangeColorSettingsDirective>
<RangeColorSettingDirective label="1°C to 10°C" start={1} end={10} colors={color1}></RangeColorSettingDirective>
<RangeColorSettingDirective label="11°C to 20°C" start={11} end={20} colors={color2}></RangeColorSettingDirective>
<RangeColorSettingDirective label="21°C to 30°C" start={21} end={30} colors={color3}></RangeColorSettingDirective>
</RangeColorSettingsDirective>
</ChartComponent>;
}
;
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, Selection, Legend, RangeColorSettingsDirective, RangeColorSettingDirective } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const color1: string[] = ['#F9D422'];
const color2: string[] = ['#F28F3F'];
const color3: string[] = ['#E94F53'];
return <ChartComponent id='charts' style={{ textAlign: "center" }} selectionMode='Point' primaryXAxis={{ valueType: 'Category', majorGridLines: { width: 0 } }} primaryYAxis={{ lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C' }} title="USA CLIMATE - WEATHER BY MONTH" chartArea={{ border: { width: 0 } }} legendSettings={{
mode: 'Range',
visible: true,
toggleVisibility: false
}}>
<Inject services={[ColumnSeries, Selection, Category, Legend]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} name='USA' xName='x' yName='y' type='Column' animation={{ enable: false }} cornerRadius={{
topLeft: 10, topRight: 10
}}>
</SeriesDirective>
</SeriesCollectionDirective>
<RangeColorSettingsDirective>
<RangeColorSettingDirective label="1°C to 10°C" start={1} end={10} colors={color1}></RangeColorSettingDirective>
<RangeColorSettingDirective label="11°C to 20°C" start={11} end={20} colors={color2}></RangeColorSettingDirective>
<RangeColorSettingDirective label="21°C to 30°C" start={21} end={30} colors={color3}></RangeColorSettingDirective>
</RangeColorSettingsDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: "Jan", y: 6.96 },
{ x: "Feb", y: 8.9 },
{ x: "Mar", y: 12 },
{ x: "Apr", y: 17.5 },
{ x: "May", y: 22.1 },
{ x: "June", y: 25 },
{ x: "July", y: 29.4 },
{ x: "Aug", y: 29.6 },
{ x: "Sep", y: 25.8 },
{ x: "Oct", y: 21.1 },
{ x: "Nov", y: 15.5 },
{ x: "Dec", y: 9.9 }
];export let data: Object[] = [
{ x: "Jan", y: 6.96 },
{ x: "Feb", y: 8.9 },
{ x: "Mar", y: 12 },
{ x: "Apr", y: 17.5 },
{ x: "May", y: 22.1 },
{ x: "June", y: 25 },
{ x: "July", y: 29.4 },
{ x: "Aug", y: 29.6 },
{ x: "Sep", y: 25.8 },
{ x: "Oct", y: 21.1 },
{ x: "Nov", y: 15.5 },
{ x: "Dec", y: 9.9 }
];Point level customization
Marker, datalabel and fill color of each data point can be customized with pointRender and textRender event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const pointRender = (args) => {
let seriesColor = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = seriesColor[args.point.index];
};
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} pointRender={pointRender} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries,IPointRenderEventArgs} from'@syncfusion/ej2-react-charts';
import { EmitType} from '@syncfusion/ej2-charts';
import { data } from './datasource';
function App() {
const pointRender: EmitType<IPointRenderEventArgs> = (args: IPointRenderEventArgs): void => {
let seriesColor: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
args.fill = seriesColor[args.point.index];
};
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
pointRender={pointRender}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Chart area customization
Customize the chart background
Using background and border properties, you can change the background color and border of the chart.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: '#FF0000' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} background='skyblue' border={border} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, BorderModel, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border: BorderModel = { width: 2, color: '#FF0000' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
background='skyblue' border={border}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Chart margin
You can set margin for chart from its container through margin property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: '#FF0000' };
const margin = { left: 40, right: 40, top: 40, bottom: 40 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} background='skyblue' border={border} margin={margin} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,BorderModel,MarginModel, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border: BorderModel = { width: 2, color: '#FF0000' };
const margin: MarginModel = { left: 40, right: 40, top: 40, bottom: 40 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
background='skyblue' border={border}
margin={margin}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Chart area customization
Using background and border properties, you can change the background color and border of the chart area. Width for the chart area can be customized using width property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: '#FF0000' };
const chartarea = { background: 'skyblue', width: '90%' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} border={border} chartArea={chartarea} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,BorderModel,ChartAreaModel, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border: BorderModel = { width: 2, color: '#FF0000' };
const chartarea: ChartAreaModel = { background: 'skyblue', width: '90%' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
border={border}
chartArea={chartarea}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Chart area margin
You can customize the space between the chart area from its chart container through margin property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: 'green' };
const legendSettings = { visible: false };
const chartarea = { border: { width: 2, color: 'blue' }, margin: { left: 50, right: 50, top: 50, bottom: 50 } };
const seriesBorder = { width: 2, color: 'grey' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
border={border}
legendSettings={legendSettings}
chartArea={chartarea}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column' border={seriesBorder}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
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, BorderModel, ChartAreaModel, Legend, Category, ColumnSeries, LegendSettingsModel } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border: BorderModel = { width: 2, color: 'green' };
const legendSettings: LegendSettingsModel = { visible: false };
const chartarea: ChartAreaModel = { border: { width: 2, color: 'blue' }, margin: { left: 50, right: 50, top: 50, bottom: 50 } };
const seriesBorder: BorderModel = { width: 2, color: 'grey' };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
border={border}
legendSettings={legendSettings}
chartArea={chartarea}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' type='Column' border={seriesBorder}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Animation
You can customize animation for a particular series using animation property. You can enable or disable animation of the series using enable property, duration specifies the duration of an animation and delay allows us to start the animation at desire time.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const primaryyAxis = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: 'grey' };
const animation = { enable: true, duration: 1200, delay: 100 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold' border={border} animation={animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Countries' };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 80, interval: 20, title: 'Medals' };
const border = { width: 2, color: 'grey' };
const animation = { enable: true, duration: 1200, delay: 100 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Olympic Medals'>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='country' yName='gold' name='Gold'
border={border}
animation={animation} type='Column'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];export let data: Object[] = [
{ country: "USA", gold: 50 },
{ country: "China", gold: 40 },
{ country: "Japan", gold: 70 },
{ country: "Australia", gold: 60 },
{ country: "France", gold: 50 },
{ country: "Germany", gold: 40 },
{ country: "Italy", gold: 40 },
{ country: "Sweden", gold: 30 }
];Fluid animation
Fluid animation used to animate series with updated dataSource continues animation rather than animation whole series. You can customize animation for a particular series using [animate] method.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', interval: 1, tickPosition: 'Inside',
labelPosition: 'Inside', labelStyle: { color: '#ffffff' } };
const primaryyAxis = { minimum: 0, maximum: 300, interval: 50, labelStyle: { color: 'transparent' } };
let count = 0;
function onChartLoad(args) {
let chart = document.getElementById('charts');
chart.setAttribute('title', '');
args.chart.loaded = null;
let columninterval = setInterval(() => {
if (document.getElementById('charts')) {
if (count === 0) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123 },
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruits', y: 170 }
];
args.chart.animate();
count++;
}
else if (count === 1) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruits', y: 100 }
];
args.chart.animate();
count++;
}
else if (count === 2) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruits', y: 30 }
];
args.chart.animate();
count = 0;
}
}
else {
clearInterval(columninterval);
}
}, 2000);
}
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Olympic Medals' loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} type='Column' xName='x' width={2} yName='y' name='Tiger' cornerRadius={{ bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 }} marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, ColumnSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', interval: 1, tickPosition: 'Inside',
labelPosition:'Inside', labelStyle: { color: '#ffffff' } };
const primaryyAxis: AxisModel = { minimum: 0, maximum: 300, interval: 50, labelStyle: { color: 'transparent' } };
let count = 0;
function onChartLoad(args: ILoadedEventArgs): void {
let chart: Element = document.getElementById('charts');
chart.setAttribute('title', '');
args.chart.loaded = null;
let columninterval = setInterval(
() => {
if (document.getElementById('charts')) {
if (count === 0) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123},
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruits', y: 170 }
];
args.chart.animate();
count++;
}
else if (count === 1) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruits', y: 100 }
];
args.chart.animate();
count++;
}
else if (count === 2) {
args.chart.series[0].dataSource = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruits', y: 30 }
];
args.chart.animate();
count = 0;
}
} else {
clearInterval(columninterval);
}
},
2000
);
}
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Olympic Medals' loaded={onChartLoad.bind(this)}>
<Inject services={[ColumnSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} type='Column' xName='x' width={2} yName='y' name='Tiger'
cornerRadius={{ bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10 }}
marker={{ dataLabel: { visible: true, position: 'Top', font: { fontWeight: '600', color: '#ffffff' } } }}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: 'Egg', y: 106 },
{ x: 'Fish', y: 103 },
{ x: 'Misc', y: 198 },
{ x: 'Tea', y: 189 },
{ x: 'Fruits', y: 250 }
];export let data: Object[] = [
{ x: 'Egg', y: 106 },
{ x: 'Fish', y: 103 },
{ x: 'Misc', y: 198 },
{ x: 'Tea', y: 189 },
{ x: 'Fruits', y: 250 }
];Chart title
Chart can be given a title using title property, to show the information about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift' };
const primaryyAxis = { title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2 };
const titlestyle = { fontFamily: "Arial", fontStyle: 'italic', fontWeight: 'regular',
color: "#E27F2D", size: '23px' };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment Rates 1975-2010' titleStyle={titlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,FontModel, Legend, DateTime, Tooltip, DataLabel, StepLineSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel= {title: 'Years',lineStyle: { width: 0 },labelFormat: 'y',
intervalType: 'Years',valueType: 'DateTime',edgeLabelPlacement: 'Shift'} ;
const primaryyAxis: AxisModel= {title: 'Percentage (%)',labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2} ;
const titlestyle:FontModel ={fontFamily: "Arial", fontStyle: 'italic',fontWeight: 'regular',
color: "#E27F2D", size: '23px'};
const marker={ visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='Unemployment Rates 1975-2010'
titleStyle = { titlestyle }>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y' name='China' width={2}type='StepLine' marker={ marker }></SeriesDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y1' name='Australia' width={2}
type='StepLine' marker={ marker }></SeriesDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y2' name='Japan' width={2}type='StepLine' marker={ marker }></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];export let data: Object[] = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];Title position
By using the position property in titleStyle, you can position the title at left, right, top or bottom of the chart. The title is positioned at the top of the chart, by default.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle = { position: 'Bottom' };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment Rates 1975-2010' titleStyle={titlestyle} legendSettings={{ visible: false }}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, FontModel, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle: FontModel = { position: 'Bottom' };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment Rates 1975-2010'
titleStyle={titlestyle}
legendSettings={{ visible: false }}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2}
type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];export let data: Object[] = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];The custom option helps you to position the title anywhere in the chart using x and y coordinates.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle = { position: 'Custom', x: 300, y: 60 };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment Rates 1975-2010' titleStyle={titlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, FontModel, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle: FontModel = { position: 'Custom', x: 300, y: 60 };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment Rates 1975-2010'
titleStyle={titlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2}
type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];export let data: Object[] = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];Title alignment
You can align the title to the near, far, or center of the chart using the textAlignment property.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle = { position: 'Bottom', textAlignment: 'Far' };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment Rates 1975-2010' titleStyle={titlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, FontModel, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel = {
title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift'
};
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2
};
const titlestyle: FontModel = { position: 'Bottom', textAlignment: 'Far' };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Unemployment Rates 1975-2010'
titleStyle={titlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2}
type='StepLine' marker={marker}></SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}></SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];export let data: Object[] = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];Title wrap
The textStyle property of chart title provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Countries' };
const textstyle = { size: '18px', color: 'Red', textAlignment: 'Far', textOverflow: 'Wrap' };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} textStyle={textstyle} title='Sales Analysis'>
<Inject services={[Legend, Tooltip, DataLabel, Category, LineSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='month' yName='sales' type='Line'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, LineSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel= { valueType: 'Category', title: 'Countries'} ;
const textstyle={ size:'18px', color:'Red', textAlignment: 'Far', textOverflow: 'Wrap' };
return <ChartComponent id='charts'
primaryXAxis={ primaryxAxis }
textStyle= { textstyle }
title='Sales Analysis'>
<Inject services={[Legend, Tooltip, DataLabel, Category, LineSeries]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={data} xName='month' yName='sales'
type='Line'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));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 }
];Chart subtitle
Chart can be given a subtitle using subTitle property, to show the information about the data plotted.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, DateTime, Tooltip, DataLabel, StepLineSeries } from '@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis = { title: 'Years', lineStyle: { width: 0 }, labelFormat: 'y',
intervalType: 'Years', valueType: 'DateTime', edgeLabelPlacement: 'Shift' };
const primaryyAxis = { title: 'Percentage (%)', labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2 };
const subtitlestyle = { fontFamily: "Arial", fontStyle: 'italic', fontWeight: 'regular',
color: "#E27F2D" };
const marker = { visible: true, width: 10, height: 10 };
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Unemployment Rates 1975-2010' subTitle='(1975-2010)' subTitleStyle={subtitlestyle}>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' name='China' width={2} type='StepLine' marker={marker}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y1' name='Australia' width={2} type='StepLine' marker={marker}>
</SeriesDirective>
<SeriesDirective dataSource={data} xName='x' yName='y2' name='Japan' width={2} type='StepLine' marker={marker}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,FontModel, Legend, DateTime, Tooltip, DataLabel, StepLineSeries} from'@syncfusion/ej2-react-charts';
import { data } from './datasource';
function App() {
const primaryxAxis: AxisModel= {title: 'Years',lineStyle: { width: 0 },labelFormat: 'y',
intervalType: 'Years',valueType: 'DateTime',edgeLabelPlacement: 'Shift'} ;
const primaryyAxis: AxisModel= {title: 'Percentage (%)',labelFormat: '{value}%',
minimum: 0, maximum: 20, interval: 2} ;
const subtitlestyle:FontModel ={fontFamily: "Arial", fontStyle: 'italic',fontWeight: 'regular',
color: "#E27F2D"};
const marker={ visible: true, width: 10, height: 10 };
return <ChartComponent id='charts'
primaryXAxis={ primaryxAxis }
primaryYAxis={ primaryyAxis }
title='Unemployment Rates 1975-2010'
subTitle='(1975-2010)'
subTitleStyle = { subtitlestyle }>
<Inject services={[StepLineSeries, Legend, Tooltip, DataLabel, DateTime]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y' name='China' width={2}
type='StepLine' marker={ marker }>
</SeriesDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y1' name='Australia' width={2}
type='StepLine' marker={ marker }>
</SeriesDirective>
<SeriesDirective dataSource ={data} xName='x' yName='y2' name='Japan' width={2}
type='StepLine' marker={ marker }>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));export let data = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];export let data: Object[] = [
{ x: new Date(1975, 0, 1), y: 16, y1: 10, y2: 4.5 },
{ x: new Date(1980, 0, 1), y: 12.5, y1: 7.5, y2: 5 },
{ x: new Date(1985, 0, 1), y: 19, y1: 11, y2: 6.5 },
{ x: new Date(1990, 0, 1), y: 14.4, y1: 7, y2: 4.4 },
{ x: new Date(1995, 0, 1), y: 11.5, y1: 8, y2: 5 },
{ x: new Date(2000, 0, 1), y: 14, y1: 6, y2: 1.5 },
{ x: new Date(2005, 0, 1), y: 10, y1: 3.5, y2: 2.5 },
{ x: new Date(2010, 0, 1), y: 16, y1: 7, y2: 3.7 }
];