100% Stacked Bar Charts in React Chart component
10 Oct 202312 minutes to read
100% Stacked bar
To render a 100% stacked bar series, use series type
as StackingBar100
and inject StackingBarSeries
module into the services
.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Months' };
const primaryyAxis = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar100'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar100'>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar100'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
100% Cylindrical stacked bar chart
To render a 100% cylindrical stacked bar chart, set the columnFacet
property to Cylinder
in the chart series.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { cylindricalData } from 'datasource.ts';
function App() {
return <ChartComponent id='charts'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y1' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y2' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection
}
from '@syncfusion/ej2-react-charts';
import { cylindricalData } from 'datasource.ts';
function App() {
return <ChartComponent id='charts'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y1' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
<SeriesDirective dataSource={cylindricalData} xName='x' yName='y2' type='StackingBar100' columnFacet='Cylinder'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
Series customization
The following properties can be used to customize the 100% stacked bar
series.
- fill – Specifies the color of the series.
- opacity – Specifies the opacity of fill.
- dashArray – Specifies the dashes for series.
- border – Specifies the color and width of series border.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject, Legend, Category, Tooltip, DataLabel, StackingBarSeries } from '@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis = { valueType: 'Category', title: 'Months' };
const primaryyAxis = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts' primaryXAxis={primaryxAxis} primaryYAxis={primaryyAxis} title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]}/>
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar100' fill='red' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar100' fill='blue' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar100' fill='yellow' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import * as React from "react";
import * as ReactDOM from "react-dom";
import { AxisModel, ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Legend, Category, Tooltip, DataLabel, Zoom, Crosshair, StackingBarSeries, Selection}
from'@syncfusion/ej2-react-charts';
import { stackBarData } from 'datasource.ts';
function App() {
const primaryxAxis: AxisModel = { valueType: 'Category', title: 'Months' };
const primaryyAxis: AxisModel = {
title: 'Percentage (%)', minimum: -20, maximum: 100,
edgeLabelPlacement: 'Shift', labelFormat: '{value}%'
};
return <ChartComponent id='charts'
primaryXAxis={primaryxAxis}
primaryYAxis={primaryyAxis}
title='Sales Comparison'>
<Inject services={[StackingBarSeries, Legend, Tooltip, DataLabel, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y' name='Apple' type='StackingBar100' fill='red' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y1' name='orange' type='StackingBar100' fill='yellow' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
<SeriesDirective dataSource={stackBarData} xName='x' yName='y2' name='Wastage' type='StackingBar100' fill='green' border= {{width: 2, color: 'black'}}>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));