The JavaScript Pyramid Chart is a hierarchical structure that has data in the form of triangles divided into sections, and each section with a related dataset.
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 specific conditions. The grouped slices can be split into individual points by clicking the slices.
Customize the look and feel of the pyramid chart using built-in APIs.
Easily get started with JavaScript Pyramid Chart by using a few lines of HTML and JS code, as demonstrated below. Also explore our JavaScript Pyramid Chart Example that shows how to render and configure the chart.
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>
<div id="container">
<div id="Chart"></div>
</div>
</body>
</html>
