Pyramid in React Accumulation chart component
20 Jan 202324 minutes to read
To render a pyramid series, use the series type as Pyramid and inject PyramidSeries module into the services.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Mode
The Pyramid chart supports linear and surface modes of rendering. The default type of the pyramidMode is linear.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' pyramidMode='Surface'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'
pyramidMode='Surface' >
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Size
The size of the pyramid chart can be customized by using the width and height properties.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' width='60%' height='80%'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' width='60%' height='80%'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</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.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' explode={true} explodeOffset='10' explodeAll={false} explodeIndex={3}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'
explode={true} explodeOffset='10' explodeAll={false} explodeIndex={3}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>Customization
Individual points can be customized using the pointRender event.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective, Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel } from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
const onPointRender = (args) => {
if (args.point.x.indexOf('India') > -1) {
args.fill = '#f4bc42';
}
else {
args.fill = '#597cf9';
}
};
return <AccumulationChartComponent id='charts' pointRender={onPointRender}>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));import * as React from "react";
import * as ReactDOM from "react-dom";
import {
AccumulationChartComponent, AccumulationSeriesCollectionDirective, AccumulationSeriesDirective,
Inject, AccumulationLegend, PyramidSeries, AccumulationTooltip, IAccLoadedEventArgs,
AccumulationDataLabel, IAccResizeEventArgs, AccumulationTheme, IAccPointRenderEventArgs
} from '@syncfusion/ej2-react-charts';
import { pyramidData } from 'datasource.ts';
function App() {
const onPointRender: EmitType<IAccPointRenderEventArgs> = (args: IAccPointRenderEventArgs): void => {
if ((args.point.x as string).indexOf('India') > -1) {
args.fill = '#f4bc42';
}
else {
args.fill = '#597cf9';
}
};
return <AccumulationChartComponent id='charts' pointRender={onPointRender}>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'
gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));<!DOCTYPE html>
<html lang="en">
<head>
<title>Syncfusion React Accumulation Series</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Essential JS 2 for React Components" />
<meta name="author" content="Syncfusion" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
<style>
#loader {
color: #008cff;
height: 40px;
left: 45%;
position: absolute;
top: 45%;
width: 30%;
}
#charts {
height : 350px;
display: block;
}
</style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>