Title and subtitle in React Chart

27 Aug 202624 minutes to read

Chart titles and subtitles provide context for the visualized data. The title 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. Customize both elements in terms of position, alignment, and style to match your application’s design.

Note: The examples in this section assume that the @syncfusion/ej2-react-charts package is installed and that ChartComponent, SeriesCollectionDirective, SeriesDirective, and Inject are imported. For setup details, see Getting started with React Chart.

Chart Title

Add a chart title using the title property. By default, the title is rendered at the top of the chart and represents the value assigned to the title 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 = { 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 position the title anywhere within the chart, use the x and y properties. These values are pixel offsets from the chart area and override the position 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: '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 Text Style

Customize the title’s appearance using the textStyle property. Options include size, color, fontFamily, fontWeight, fontStyle, and opacity to control the title’s font and color.

import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, ColumnSeries, Category, Legend } from '@syncfusion/ej2-react-charts';

const titleStyle = {
    fontFamily: 'Arial',
    fontStyle: 'italic',
    fontWeight: 'regular',
    color: '#E27F2D',
    size: '24px'
};

<ChartComponent id='charts' title='Sales by Region' titleStyle={titleStyle}>
    <Inject services={[ColumnSeries, Category, Legend]} />
    <SeriesCollectionDirective>
        <SeriesDirective dataSource={data} xName='region' yName='sales' type='Column' />
    </SeriesCollectionDirective>
</ChartComponent>

Long Title Handling

For long titles, control wrapping and overflow with the following titleStyle properties:

  • maximumTitleWidth – Sets the maximum width (in pixels) for the title before wrapping or truncation applies. The default is null (no limit).
  • textOverflow – Specifies how overflowing text is rendered. Supported values are Wrap (default) and Trim.
  • textWrap – Controls line-break behavior when textOverflow is Wrap. Supported values are Normal, BreakWord, and AnyWhere.
const titleStyle = {
    textOverflow: 'Trim',
    maximumTitleWidth: 250
};

Chart Subtitle

Add a subtitle to the chart using the subTitle property. Subtitles 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 }
];

Customize the subtitle’s appearance, position, and alignment using subTitleStyle. The subtitle supports the same textStyle, position, textAlignment, x, y, maximumTitleWidth, textOverflow, and textWrap properties as the title.

Subtitle Position

Use the position property within subTitleStyle to place the subtitle at the top, bottom, left, or right of the chart. The default position is at the top, directly below the title.

const subTitleStyle = { position: 'Bottom' };

Subtitle Alignment

Align the subtitle to the near, center, or far side of the chart using the textAlignment property within subTitleStyle.

const subTitleStyle = { position: 'Top', textAlignment: 'Center' };

Subtitle Text Style

Customize the subtitle’s appearance using the textStyle property of subTitleStyle. It accepts the same size, color, fontFamily, fontWeight, fontStyle, and opacity options as the title.

const subTitleStyle = {
    textStyle: {
        fontFamily: 'Arial',
        fontStyle: 'italic',
        fontWeight: 'regular',
        color: '#E27F2D',
        size: '14px'
    }
};

Subtitle Template

For complete control over the subtitle markup, use the subTitleTemplate property to supply a custom HTML string. The template can include inline styles or a reference to a CSS class defined in the application.

<ChartComponent
    id='charts'
    title='Sales by Region'
    subTitle='FY 2025'
    subTitleTemplate='<div class="chart-subtitle">FY 2025 <span class="badge">Updated</span></div>'
>
</ChartComponent>

See also