Stacked bar chart in React Chart component

10 Jan 202424 minutes to read

Stacked bar chart

To render a stacked bar series, use series type as StackingBar and inject StackingBar3D module into the services.

index.jsx
index.tsx
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar'>
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar'>
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Stacking group

To group the stacked bar, the stackingGroup property can be used. The columns with same group name are stacked on top of each other.

index.jsx
index.tsx
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' stackingGroup='JohnAndAndrew'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' stackingGroup='JohnAndAndrew'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' stackingGroup='ThomasAndMichael'>
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' stackingGroup='JohnAndAndrew'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' stackingGroup='JohnAndAndrew'>
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' stackingGroup='ThomasAndMichael'>
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Cylindrical stacked bar chart

To render a cylindrical stacked bar chart, set the columnFacet property to Cylinder in the chart series.

index.jsx
index.tsx
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' columnFacet="Cylinder">
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Series customization

The following properties can be used to customize the stacked bar series.

fill – Specifies the color of the series.
opacity – Specifies the opacity of the fill color.

index.jsx
index.tsx
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' fill="red">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' fill="green">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' fill="yellow">
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
}
;
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));
import { Chart3DComponent, Chart3DSeriesCollectionDirective, Chart3DSeriesDirective, Category3D, Inject, Legend3D, DataLabel3D, Tooltip3D, StackingBarSeries3D, Highlight3D } from '@syncfusion/ej2-react-charts';
import * as React from "react";
import * as ReactDOM from "react-dom";

function App() {
    const data = [
        { x: 'Sochi', y: 9, y1: 10, y2: 4 },
        { x: 'Rio', y: 46, y1: 4, y2: 10 },
        { x: 'Pyeongchang', y: 9, y1: 11, y2: 5 },
        { x: 'Tokyo', y: 39, y1: 7, y2: 10 },
        { x: 'Beijing', y: 8, y1: 4, y2: 5 }
    ];
        
    return <Chart3DComponent id='charts' primaryXAxis=
        primaryYAxis=
            wallColor='transparent'
            enableRotation={true} rotation={7} tilt={10} depth={100}>
            <Inject services={[StackingBarSeries3D, Category3D, Legend3D, Tooltip3D, DataLabel3D, Highlight3D]} />
            <Chart3DSeriesCollectionDirective >
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y' type='StackingBar' fill="red">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y1' type='StackingBar' fill="green">
                </Chart3DSeriesDirective>
                <Chart3DSeriesDirective dataSource={data} xName='x' yName='y2' type='StackingBar' fill="yellow">
                </Chart3DSeriesDirective>
            </Chart3DSeriesCollectionDirective>
        </Chart3DComponent>;
};
export default App;
ReactDOM.render(<App />, document.getElementById("charts"));

Search docs

Ask HelpBot