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';
class App extends React.Component {
render() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
render() {
return <AccumulationChartComponent id='charts'>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
render() {
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>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
render() {
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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
render() {
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>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
render() {
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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
render() {
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>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
render() {
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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
render() {
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>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
render() {
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>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));
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';
class App extends React.Component {
constructor() {
super(...arguments);
this.onPointRender = (args) => {
if (args.point.x.indexOf('India') > -1) {
args.fill = '#f4bc42';
}
else {
args.fill = '#597cf9';
}
};
}
render() {
return <AccumulationChartComponent id='charts' pointRender={this.onPointRender}>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]}/>
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid' gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>;
}
}
;
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>
</head>
<body>
<div id='charts'>
<div id='loader'>Loading....</div>
</div>
</body>
</html>
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';
class App extends React.Component<{}, {}> {
public onPointRender: EmitType<IAccPointRenderEventArgs> = (args: IAccPointRenderEventArgs): void => {
if ((args.point.x as string).indexOf('India') > -1) {
args.fill = '#f4bc42';
}
else {
args.fill = '#597cf9';
}
};
render() {
return <AccumulationChartComponent id='charts' pointRender={this.onPointRender}>
<Inject services={[AccumulationLegend, PyramidSeries, AccumulationTooltip, AccumulationDataLabel]} />
<AccumulationSeriesCollectionDirective>
<AccumulationSeriesDirective dataSource={pyramidData} xName='x' yName='y' type='Pyramid'
gapRatio={0.2}>
</AccumulationSeriesDirective>
</AccumulationSeriesCollectionDirective>
</AccumulationChartComponent>
}
};
ReactDOM.render(<App />, document.getElementById("charts"));