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>
