Chart title and subtitle in TypeScript Chart component

18 Nov 201824 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 { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);

let chartData: 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 }
];
let chart: Chart = new Chart({

        primaryXAxis: {
            title: 'Years',
            lineStyle: { width: 0 },
            labelFormat: 'y',
            intervalType: 'Years',
            valueType: 'DateTime',
            edgeLabelPlacement: 'Shift'
        },

        primaryYAxis:
        {
            title: 'Percentage (%)',
            minimum: 0, maximum: 20, interval: 2,
            labelFormat: '{value}%'
        },
        series: [
            {
                type: 'StepLine',
                dataSource: chartData, xName: 'x', yName: 'y',
                width: 2, name: 'China',
                marker: {
                    visible: true, width: 10, height: 10
                },
            },
            {
                type: 'StepLine',
                dataSource: chartData, xName: 'x', yName: 'y1',
                width: 2, name: 'Australia',
                marker: {
                    visible: true, width: 10, height: 10
                },
            },
            {
                type: 'StepLine',
                dataSource: chartData, xName: 'x', yName: 'y2',
                width: 2, name: 'Japan',
                marker: {
                    visible: true, width: 10, height: 10
                },

            },
        ],
        //Title for chart
        title: 'Unemployment Rates 1975-2010',
        titleStyle:{
            fontFamily: "Arial",
            fontStyle: 'italic',
            fontWeight: 'regular',
            color: "#E27F2D",
            size: '23px'
        }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
		   <div id='element1'></div>
    </div>
</body>

</html>

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 { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);

let chartData: 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 }
];
let chart: Chart = new Chart({

    primaryXAxis: {
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },

    primaryYAxis:
    {
        title: 'Percentage (%)',
        minimum: 0, maximum: 20, interval: 2,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: {
                visible: true, width: 10, height: 10
            },

        },
    ],
    //Title for chart
    title: 'Unemployment Rates 1975-2010',
    titleStyle: { position: 'Bottom' },
    legendSettings: {visible: false}
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
		   <div id='element1'></div>
    </div>
</body>

</html>

To manually position the title anywhere within the chart, use the x and y properties.

import { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);

let chartData: 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 }
];
let chart: Chart = new Chart({

    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },

    primaryYAxis:
    {
        title: 'Percentage (%)',
        minimum: 0, maximum: 20, interval: 2,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: {
                visible: true, width: 10, height: 10
            },

        },
    ],
    //Title for chart
    title: 'Unemployment Rates 1975-2010',
    titleStyle: {
        position: 'Custom',
        x: 300, 
        y: 60
    }
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
		   <div id='element1'></div>
    </div>
</body>

</html>

Title alignment

Align the chart title to the near, center, or far side of the chart using the textAlignment property.

import { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);

let chartData: 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 }
];
let chart: Chart = new Chart({

    primaryXAxis: {
        title: 'Years',
        lineStyle: { width: 0 },
        labelFormat: 'y',
        intervalType: 'Years',
        valueType: 'DateTime',
        edgeLabelPlacement: 'Shift'
    },

    primaryYAxis:
    {
        title: 'Percentage (%)',
        minimum: 0, maximum: 20, interval: 2,
        labelFormat: '{value}%'
    },
    series: [
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y',
            width: 2, name: 'China',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y1',
            width: 2, name: 'Australia',
            marker: {
                visible: true, width: 10, height: 10
            },
        },
        {
            type: 'StepLine',
            dataSource: chartData, xName: 'x', yName: 'y2',
            width: 2, name: 'Japan',
            marker: {
                visible: true, width: 10, height: 10
            },

        },
    ],
    //Title for chart
    title: 'Unemployment Rates 1975-2010',
    titleStyle: { position: 'Bottom', textAlignment: 'Far' },
    legendSettings: {visible: false}
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
		   <div id='element1'></div>
    </div>
</body>

</html>

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 { Chart, LineSeries, Legend, Category, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, Legend, Category, Tooltip);
let chartData: 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 }
];
let chart: Chart = new Chart({
    primaryXAxis: {
        valueType: 'Category'
    },
    title: 'Sales Analysis',
    textStyle:{size:'18px', color:'Red', textAlignment: 'Far', textOverflow: 'Wrap' },
    series:[{
        dataSource: chartData,
        xName: 'month',
        yName: 'sales',
        type: 'Line'
    }],
}, '#element');
<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 Animation</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='element'></div>
    </div>
</body>

</html>