Title and sub title in EJ2 JavaScript Accumulation chart control
19 Mar 202413 minutes to read
Title
Accumulation Chart can be given a title using title property, to show the information about the data plotted.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
],
xName: 'x', yName: 'y',
dataLabel: {
visible: true,
name: 'text',
font: { color: 'white' }
},
}
],
legendSettings: {
visible: false,
},
title: 'Oil and other liquid imports in USA',
}, '#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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>Title customization
Accumulation Chart can be customizing a title using titleStyle property.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
],
xName: 'x', yName: 'y',
dataLabel: {
visible: true,
name: 'text',
font: { color: 'white' }
},
}
],
legendSettings: {
visible: false,
},
title: 'Oil and other liquid imports in USA',
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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>SubTitle
Accumulation Chart can be given a subtitle using subTitle property, to show the information about the data plotted.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
],
xName: 'x', yName: 'y',
dataLabel: {
visible: true,
name: 'text',
font: { color: 'white' }
},
}
],
legendSettings: {
visible: false,
},
title: 'Oil and other liquid imports in USA',
subTitle : 'In the year 2014 - 2015'
}, '#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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>SubTitle customization
Accumulation Chart can be customizing a subtitle using subTitleStyle property, to show the information about the data plotted.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Saudi Arabia', y: 58, text: '58%' },
{ x: 'Persian Gulf', y: 15, text: '15%' },
{ x: 'Canada', y: 13, text: '13%' },
{ x: 'Venezuela', y: 8, text: '8%' },
{ x: 'Mexico', y: 3, text: '3%' },
{ x: 'Russia', y: 2, text: '2%' },
{ x: 'Miscellaneous', y: 1, text: '1%' }
],
xName: 'x', yName: 'y',
dataLabel: {
visible: true,
name: 'text',
font: { color: 'white' }
},
}
],
legendSettings: {
visible: false,
},
title: 'Oil and other liquid imports in USA',
subTitle : 'In the year 2014 - 2015'
}, '#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://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id="container">
<div id="element"></div>
</div>
<script>
var ele = document.getElementById('container');
if(ele) {
ele.style.visibility = "visible";
}
</script>
<script src="index.js" type="text/javascript"></script>
</body></html>