Chart appearance in EJ2 TypeScript Chart control
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 { Chart, ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'silver',
name: 'Silver', type: 'Column'
}, {
dataSource: chartData,
xName: 'country', yName: 'bronze',
name: 'Bronze', type: 'Column'
}],
// palettes for chart
palettes: ["#E94649", "#F6B53F", "#6FAAB0", "#C4C24A"],
title: 'Olympic Medals'
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>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 { Chart, ColumnSeries, Category } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chart: Chart = new Chart({
primaryXAxis: { valueType: 'Category', majorGridLines: { width: 0 } },
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
},
chartArea: {
border: {
width: 0
}
},
series: [
{
pointColorMapping: "color",
dataSource: [
{ 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" }
], xName: 'x', yName: 'y', type: 'Column',
animation: { enable: false },
cornerRadius: {
topLeft: 10, topRight: 10
},
}
],
title: 'USA CLIMATE - WEATHER BY MONTH',
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Range color mapping
You can differentiate data points based on their y values using rangeColorSettings in the chart.
import { Chart, ColumnSeries, Category, Legend, Selection } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category, Legend, Selection);
let chart: Chart = new Chart({
selectionMode: 'Point',
primaryXAxis: { valueType: 'Category', majorGridLines: { width: 0 } },
primaryYAxis: {
lineStyle: { width: 0 },
majorTickLines: { width: 0 },
minorTickLines: { width: 0 },
labelFormat: '{value}°C',
},
chartArea: {
border: {
width: 0
}
},
series: [
{
dataSource: [
{ 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 }
], xName: 'x', yName: 'y', type: 'Column',
animation: { enable: false }, name: 'USA',
cornerRadius: {
topLeft: 10, topRight: 10
},
}
],
rangeColorSettings: [
{
label: '1°C to 10°C',
start: 1,
end: 10,
colors: ['#F9D422']
},
{
label: '11°C to 20°C',
start: 11,
end: 20,
colors: ['#F28F3F']
},
{
label: '21°C to 30°C',
start: 21,
end: 30,
colors: ['#E94F53']
}
],
legendSettings: {
mode: 'Range',
toggleVisibility: false
},
title: 'USA CLIMATE - WEATHER BY MONTH',
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Point level customization
Marker, data label and fill color of each data point can be customized with pointRender and textRender event.
import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs, IPointRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: any[] = [
{ 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 }
];
let colors: string[] = ['#00bdae', '#404041', '#357cd2', '#e56590', '#f8b883',
'#70ad47', '#dd8abd', '#7f84e8', '#7bb4eb', '#ea7a57'];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series: [{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column'
}],
// point render event for chart
pointRender: (args: IPointRenderEventArgs): void => {
args.fill = colors[args.point.index];
},
title: 'Olympic Medals'
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Chart area customization
Customize the chart background
Using background and border properties, you can change the background color and border of the chart.
import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series: [{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column',
border: { width: 2, color: 'grey' }
}],
title: 'Olympic Medals',
//Customizing Chart background
background: 'skyblue',
//Customize the chart border and opacity
border: { color: "#FF0000", width: 2 },
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Chart margin
You can set margin for chart from its container through margin property.
import { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series: [{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column',
border: { width: 2, color: 'grey' }
}],
title: 'Olympic Medals',
background: 'skyblue',
border: { color: "#FF0000", width: 2 },
//Change chart margin to left, right, top and bottom
margin: { left: 40, right: 40, top: 40, bottom: 40 },
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>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 { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series: [{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column',
border: { width: 2, color: 'grey' }
}],
title: 'Olympic Medals',
chartArea: {
//background for Chart area
background: "skyblue",
// width of the chart area
width: '80%'
}
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Chart area margin
You can customize the space between the chart area from its chart container through margin property.
import { Chart, ColumnSeries, Category, Legend } from '@syncfusion/ej2-charts';
import { chartData } from './datasource.ts';
Chart.Inject(ColumnSeries, Category, Legend);
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0,
maximum: 80,
interval: 20,
title: 'Medals'
},
series: [
{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column',
border: { width: 2, color: 'grey' }
}
],
title: 'Olympic Medals',
legendSettings: { visible: false },
chartArea: {
border: { width: 2, color: 'blue' },
// margin of the chart area
margin: { left: 50, right: 50, top: 50, bottom: 50 }
},
border: { width: 2, color: 'green' }
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>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 { Chart, ColumnSeries, Category, ISeriesRenderEventArgs } from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, Category);
let chartData: any[] = [
{ 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 }
];
let chart: Chart = new Chart({
primaryXAxis: {
valueType: 'Category',
title: 'Countries'
},
primaryYAxis: {
minimum: 0, maximum: 80,
interval: 20, title: 'Medals'
},
series:[{
dataSource: chartData,
xName: 'country', yName: 'gold',
name: 'Gold', type: 'Column',
border:{ width: 2, color: 'grey'},
//Animation for chart series
animation:{
enable: true,
duration: 2000,
delay: 200
}
}],
title: 'Olympic Medals'
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>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 {
Chart, ColumnSeries, Category, DataLabel,Tooltip, ILoadedEventArgs
} from '@syncfusion/ej2-charts';
Chart.Inject(ColumnSeries, DataLabel, Category, Tooltip);
let count: number = 0;
let chart: Chart = new Chart({
//Initializing Primary X Axis
primaryXAxis: {
valueType: 'Category', interval: 1, majorGridLines: { width: 0 },
tickPosition: 'Inside',
labelPosition: 'Inside', labelStyle: { color: '#ffffff' }
},
chartArea: { border: { width: 0 } },
//Initializing Primary Y Axis
primaryYAxis:
{
minimum: 0, maximum: 300, interval: 50, majorGridLines: { width: 0 },
majorTickLines: { width: 0 }, lineStyle: { width: 0 }, labelStyle: { color: 'transparent' }
},
//Initializing Chart Series
series: [
{
type: 'Column', xName: 'x', width: 2, yName: 'y',
dataSource: [
{ x: 'Egg', y: 106 },
{ x: 'Fish', y: 103 },
{ x: 'Misc', y: 198 },
{ x: 'Tea', y: 189 },
{ x: 'Fruit', y: 250 }
], name: 'Tiger',
cornerRadius: {
bottomLeft: 10, bottomRight: 10, topLeft: 10, topRight: 10
},
}
],
legendSettings: { visible: false },
//Initializing Chart title
title: 'Trade in Food Groups', tooltip: { enable: false },
loaded: (args: ILoadedEventArgs) => {
let columninterval = setInterval(
() => {
if (document.getElementById('element')) {
if (count === 0) {
chart.series[0].dataSource = [
{ x: 'Egg', y: 206 },
{ x: 'Fish', y: 123 },
{ x: 'Misc', y: 48 },
{ x: 'Tea', y: 240 },
{ x: 'Fruit', y: 170 }
];
chart.animate();
count++;
}
else if (count === 1) {
chart.series[0].dataSource = [
{ x: 'Egg', y: 86 },
{ x: 'Fish', y: 173 },
{ x: 'Misc', y: 188 },
{ x: 'Tea', y: 109 },
{ x: 'Fruit', y: 100 }
];
chart.animate();
count++;
}
else if (count === 2) {
chart.series[0].dataSource = [
{ x: 'Egg', y: 156 },
{ x: 'Fish', y: 33 },
{ x: 'Misc', y: 260 },
{ x: 'Tea', y: 200 },
{ x: 'Fruit', y: 30 }
];
chart.animate();
count = 0;
}
} else {
clearInterval(columninterval);
}
},
2000
);
},
}, '#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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Chart title
Chart can be given a title using title property, to show the information about the data plotted.
import { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);
let chartData: any[] = [
{ 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>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 { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);
let chartData: any[] = [
{ 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>The custom option helps you to position the title anywhere in the chart using x and y coordinates.
import { Chart, StepLineSeries, DateTime, Legend, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(StepLineSeries, DateTime, Legend, Tooltip);
let chartData: any[] = [
{ 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Title alignment
You can align the title to the near, far, or center 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: any[] = [
{ 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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id='element1'></div>
</div>
</body>
</html>Title wrap
The textStyle property of chart title provides options to customize the size, color, fontFamily, fontWeight, fontStyle, opacity, textAlignment and textOverflow.
import { Chart, LineSeries } from '@syncfusion/ej2-charts';
import { Legend, Category, Tooltip } from '@syncfusion/ej2-charts';
Chart.Inject(LineSeries, Legend, Category, Tooltip);
let chartData: any[] = [
{ month: 'Jan', sales: 35 }, { month: 'Feb', sales: 28 },
{ month: 'Mar', sales: 34 }, { month: 'Apr', sales: 32 },
{ month: 'May', sales: 40 }, { month: 'Jun', sales: 32 },
{ month: 'Jul', sales: 35 }, { month: 'Aug', sales: 55 },
{ month: 'Sep', sales: 38 }, { month: 'Oct', sales: 30 },
{ month: 'Nov', sales: 25 }, { month: 'Dec', sales: 32 }
];
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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
</div>
</body>
</html>