The React 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 React Pyramid Chart by using a few lines of HTML and JS code, as demonstrated below. Also explore our React Pyramid Chart Example that shows how to render and configure the chart.
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, PyramidSeries}
from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
public data1: any[]= [
{ x: 'United States', y: 45, text: 'USA', fill: '#00226C' },
{ x: 'Australia', y: 53, text: 'AUS: 14%', fill: '#0450C2' },
{ x: 'China', y: 56, text: 'CHN', fill: '#0073DC' },
{ x: 'India', y: 61, text: 'IND', fill: '#0D98FF' },
{ x: 'Japan', y: 40, text: 'JPN', fill: '#9CD9FF' },
{ x: 'United Kingdom', y: 20, text: 'UK', fill: '#0450C2' }
];
public render() {
return <AccumulationChartComponent id='charts'>
<Inject services={[PyramidSeries]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={this.data1} xName='x' yName='y' type='Pyramid'/>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(
<App />,
document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>
<body>
<div id="charts"></div>
</body>
</html>
Learn the available options to customize React Pyramid chart.
Explore the React Pyramid chart APIs.