Title and subtitle in EJ2 TypeScript 3D Circular Chart control
19 Mar 202414 minutes to read
Title
The 3D Circular Chart can be given a title by using the title property to display information about the plotted data.
import { CircularChart3D, PieSeries3D, CircularChartLegend3D } from '@syncfusion/ej2-charts';
CircularChart3D.Inject(PieSeries3D, CircularChartLegend3D);
let circularchart: CircularChart3D = new CircularChart3D({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58 },
{ x: 'Persian Gulf', y: 15 },
{ x: 'Canada', y: 13 },
{ x: 'Venezuela', y: 8 },
{ x: 'Mexico', y: 3 },
{ x: 'Russia', y: 2 },
{ x: 'Miscellaneous', y: 1 }
],
xName: 'x',
yName: 'y'
}
],
tilt: -45,
title: 'Oil and other liquid imports in USA',
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>
</body>
</html>Title customization
The title of the 3D Circular Chart can be customized using the titleStyle property.
import { CircularChart3D, PieSeries3D, CircularChartLegend3D } from '@syncfusion/ej2-charts';
CircularChart3D.Inject(PieSeries3D, CircularChartLegend3D);
let circularchart: CircularChart3D = new CircularChart3D({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58 },
{ x: 'Persian Gulf', y: 15 },
{ x: 'Canada', y: 13 },
{ x: 'Venezuela', y: 8 },
{ x: 'Mexico', y: 3 },
{ x: 'Russia', y: 2 },
{ x: 'Miscellaneous', y: 1 }
],
xName: 'x',
yName: 'y'
}
],
tilt: -45,
title: 'Oil and other liquid imports in USA',
titleStyle: {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '23px'
},
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>
</body>
</html>Subtitle
The 3D Circular Chart can be given a subtitle by using the subTitle property to display information about the plotted data.
import { CircularChart3D, PieSeries3D, CircularChartLegend3D } from '@syncfusion/ej2-charts';
CircularChart3D.Inject(PieSeries3D, CircularChartLegend3D);
let circularchart: CircularChart3D = new CircularChart3D({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58 },
{ x: 'Persian Gulf', y: 15 },
{ x: 'Canada', y: 13 },
{ x: 'Venezuela', y: 8 },
{ x: 'Mexico', y: 3 },
{ x: 'Russia', y: 2 },
{ x: 'Miscellaneous', y: 1 }
],
xName: 'x',
yName: 'y'
}
],
tilt: -45,
title: 'Oil and other liquid imports in USA',
subTitle : 'In the year 2014 - 2015',
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>
</body>
</html>Subtitle customization
The subtitle of the 3D Circular Chart can be customized using the subTitleStyle property.
import { CircularChart3D, PieSeries3D, CircularChartLegend3D } from '@syncfusion/ej2-charts';
CircularChart3D.Inject(PieSeries3D, CircularChartLegend3D);
let circularchart: CircularChart3D = new CircularChart3D({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58 },
{ x: 'Persian Gulf', y: 15 },
{ x: 'Canada', y: 13 },
{ x: 'Venezuela', y: 8 },
{ x: 'Mexico', y: 3 },
{ x: 'Russia', y: 2 },
{ x: 'Miscellaneous', y: 1 }
],
xName: 'x',
yName: 'y'
}
],
tilt: -45,
title: 'Oil and other liquid imports in USA',
subTitle : 'In the year 2014 - 2015',
subTitleStyle: {
fontFamily: "Arial",
fontStyle: 'italic',
fontWeight: 'regular',
color: "#E27F2D",
size: '13px'
},
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>
</body>
</html>