Pyramid in EJ2 JavaScript Accumulation chart control
13 Dec 202423 minutes to read
To render a pyramid series, use the series type as Pyramid and inject PyramidSeries module using the AccumulationChart.Inject(PyramidSeries) method.
var chart = new ej.charts.AccumulationChart({
width: '600px',
series: [{
type: 'Pyramid',
dataSource: [{ x: 'Australia', y: 20, text: 'Australia 20%' },
{ x: 'France', y: 22, text: 'France 22%' },
{ x: 'China', y: 23, text: 'China 23%' },
{ x: 'India', y: 24, text: 'India 24%' },
{ x: 'Japan', y: 25, text: 'Japan 25%' },
{ x: 'Germany', y: 27, text: 'Germany 27%' }],
xName: 'x', yName: 'y',
dataLabel: { name: 'text', visible: true, position: 'Inside' },
}],
title: 'Sales Distribution of Car by Region',
}, '#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/31.2.12/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>Mode
The Pyramid chart supports linear and surface modes of rendering. The default type of the pyramidMode is linear.
var pyramidchart = new ej.charts.AccumulationChart({
series: [{
width: '600px',
type: 'Pyramid',
dataSource: [
{ x: 'Australia', y: 20, text: 'Australia 20%' },
{ x: 'France', y: 22, text: 'France 22%' },
{ x: 'China', y: 23, text: 'China 23%' },
{ x: 'India', y: 24, text: 'India 24%' },
{ x: 'Japan', y: 25, text: 'Japan 25%' },
{ x: 'Germany', y: 27, text: 'Germany 27%' },
],
xName: 'x', yName: 'y',
dataLabel: { visible: true, name: 'text', position: 'Inside' },
pyramidMode: 'Linear',
}],
title: 'Sales Distribution of Car by Region',
}, '#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/31.2.12/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>Size
The size of the pyramid chart can be customized by using the width and height properties.
var chart = new ej.charts.AccumulationChart({
series: [{
type: 'Funnel',
dataSource: [{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }],
xName: 'x', yName: 'y',
//Width of the funnel will be 100% of the chart area
width: '60%',
//Height of the funnel will be 100% of the chart area
height: '80%',
dataLabel: { name: 'text', visible: true, position: 'Inside' },
}],
title: 'Website visitor',
}, '#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/31.2.12/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>Gap between the segments
Pyramid chart provides options to customize the space between the segments by using the gapRatio property of the series. It ranges from 0 to 1.
var pyramidchart = new ej.charts.AccumulationChart({
series: [{
type: 'Funnel',
dataSource: [{ x: 'Renewed', y: 18.20, text: 'Renewed 18.20%' },
{ x: 'Subscribe', y: 27.3, text: 'Subscribe 27.3%' },
{ x: 'Support', y: 55.9, text: 'Support 55.9%' },
{ x: 'Downloaded', y: 76.8, text: 'Downloaded 76.8%' },
{ x: 'Visited', y: 100, text: 'Visited 100%' }],
xName: 'x', yName: 'y',
dataLabel: { visible: true, name: 'text', position: 'Inside' },
// Defines the gap to be left between the segments
gapRatio: 0.04,
}],
title: 'Website visitor',
}, '#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/31.2.12/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>Explode
Points can be exploded on mouse click by setting the explode property to true. You can also explode the point on load using explodeIndex. Explode distance can be set by using explodeOffset property.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' },
{ x: 'Nov', y: 9, text: 'Nov: 9' }, { x: 'Dec', y: 3.5, text: 'Dec: 3.5' }],
dataLabel: { visible: true, name: 'text', position: 'Outside' },
groupTo: '11',
xName: 'x',
yName: 'y',
explode: true,
//Specifies the distance of the point from the center during explode, which takes values in both pixels and percentage
explodeOffset: '10',
//If set true, all the points in the series will get exploded on load
explodeAll: false,
//Specifies index of the point, to be exploded on load
explodeIndex: 2
}
],
textRender: (args) => {
if (args.text.indexOf('Others') > -1) {
args.color = 'red';
args.border.width = 1;
}
},
pointRender: (args) => {
if ((args.point.x).indexOf('Others') > -1) {
args.fill = '#D3D3D3';
}
},
}, '#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/31.2.12/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>Customization
Individual points can be customized using the pointRender event.
var piechart = new ej.charts.AccumulationChart({
series: [
{
dataSource: [
{ x: 'Jan', y: 3, text: 'Jan: 3' }, { x: 'Feb', y: 3.5, text: 'Feb: 3.5' },
{ x: 'Mar', y: 7, text: 'Mar: 7' }, { x: 'Apr', y: 13.5, text: 'Apr: 13.5' },
{ x: 'May', y: 19, text: 'May: 19' }, { x: 'Jun', y: 23.5, text: 'Jun: 23.5' },
{ x: 'Jul', y: 26, text: 'Jul: 26' }, { x: 'Aug', y: 25, text: 'Aug: 25' },
{ x: 'Sep', y: 21, text: 'Sep: 21' }, { x: 'Oct', y: 15, text: 'Oct: 15' },
{ x: 'Nov', y: 9, text: 'Nov: 9' }, { x: 'Dec', y: 3.5, text: 'Dec: 3.5' }],
dataLabel: { visible: true, name: 'text', position: 'Outside' },
groupTo: '11',
xName: 'x',
yName: 'y'
}
],
textRender: (args) => {
if (args.text.indexOf('Others') > -1) {
args.color = 'red';
args.border.width = 1;
}
},
pointRender: (args) => {
if ((args.point.x).indexOf('Others') > -1) {
args.fill = '#D3D3D3';
}
},
}, '#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/31.2.12/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>