JavaScript pyramid chart is the form of a triangle with lines dividing it into sections, each section with a different width. Depending on the Y coordinates, this width indicates a level of hierarchy among other categories.
Data labels display information about data points. Add a template to display data labels with HTML elements such as images, DIV, and spans for more informative data labels. You can rotate a data label by its given angle.
Data points can be exploded on rendering and on mouse click.
Group the points in a pyramid chart based on certain conditions. The grouped slices can be split into individual points by clicking the slice.
Customize the look and feel of the pyramid chart using built-in APIs.
import { AccumulationChart, PyramidSeries} from '@syncfusion/ej2-charts';
Chart.Inject(AccumulationChart, PyramidSeries);
let chart: AccumulationChart = new AccumulationChart({
series:[AccumulationChart = new AccumulationChart({
series: [{
type: 'Pyramid',
dataSource: [
{ x: 'United States', y: 45, text: 'USA', fill: '#00226C' },
{ x: 'Australia', y: 53, text: 'AUS', fill: '#0450C2' },
{ x: 'China', y: 56, text: 'CHN', fill: '#0073DC' },
{ x: 'India', y: 61, text: 'IND', fill: '#0D98FF' },
{ x: 'Japan', y: 13, text: 'JPN', fill: '#9CD9FF' },
{ x: 'United Kingdom', y: 71, text: 'UK', fill: '#0450C2' }
],
xName: 'x', yName: 'y'
}
],
}, '#Chart');<!DOCTYPE html>
<html>
<head></head>
<body style = 'overflow: hidden'>
<div id="container">
<div id="Chart"></div>
</div>
<style>
#control-container {
padding: 0px !important;
}
</style>
</body>
</html>
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
