How can I help you?
Title and Subtitle in React Chart Component
24 Feb 202624 minutes to read
Chart titles and subtitles help provide context for the visualized data. The title typically indicates the main subject or metric represented in the chart, while the subtitle adds supporting details such as data sources, time ranges, or explanatory notes. Both elements can be customized in terms of position, alignment, and style to align with application design requirements.
Chart title
Add a chart title using the title property. The title appears at the top of the chart by default and is used to describe the purpose or subject of the visualization.
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
Use the position property within titleStyle to place the title at the left, right, top, or bottom of the chart. The default position is at the top.
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 }
];To manually position the title anywhere within the chart, use the x and y properties.
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
Align the chart title to the near, center, or far side 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
Customize the title’s appearance using the textStyle property. Options include size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment, and textOverflow to control how the title is rendered within the chart area.
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
Add a subtitle to the chart using the subTitle property. Subtitles help provide additional context such as descriptions, notes, or supporting information related to the chart data.
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 }
];