React React Charts Stacked Bar Chart

Overview

The React Stacked Bar Chart displays cumulative values by stacking series horizontally. The relationship between individual values and their overall total is visualized through stacked bars.

Multiple series

Multiple series can be displayed in a single chart to compare different datasets. Legends and tooltips provide additional information about individual series and data points.

Marker

Markers support built-in shapes such as circles, rectangles, ellipses, lines, diamonds, triangles, pentagons, crosses, and pluses. Images can also be used as marker symbols for customized presentations.

Data label

Data labels display information about data points. Templates support custom label content using HTML elements such as images, divs, and spans. Labels can also be rotated to a specified angle.

Multiple axes

Use multiple axes to plot different data sets that vary widely from each other.

Stacking group

Series can be organized into separate stacking groups using different group names.

Spacing and width

Bar spacing and width can be customized to achieve the desired layout.

Rounded corners

Rounded corners can be applied to stacked bars for customized appearance.

Cylindrical stacked bar

Values can be displayed using cylindrical bar segments for an alternative visual style.

Customization

Customize the look and feel of the stacked bar chart using built-in APIs.

React Stacked Bar Chart Code Example

Get started with React Stacked Bar using the HTML and JavaScript code below. Also explore the demo to learn how to render and configure the component.

import {AxisModel,Category,ChartComponent,Inject,SeriesCollectionDirective, SeriesDirective, StackingBarSeries} from'@syncfusion/ej2-react-charts';
import * as React from 'react';
class App extends React.Component<{}, {}> {
  public primaryXAxis: AxisModel = { valueType: 'Category'};
  public data1: any[]= [
    { x: '2014', y: 111.1 },
    { x: '2015', y: 127.3 },
    { x: '2016', y: 143.4 },
    { x: '2017', y: 159.9 }];
  public data2: any[]= [
    { x: '2014', y: 76.9 },
    { x: '2015', y: 99.5 },
    { x: '2016', y: 121.7 },
    { x: '2017', y: 142.5 }];
  public render() {
    return <ChartComponent id='charts' primaryXAxis={this.primaryXAxis}>
      <Inject services={[StackingBarSeries, Category]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='StackingBar'/>
      <SeriesDirective dataSource={this.data2} xName='x' yName='y' type='StackingBar'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

<body> 
     <div id="charts"></div>
</body>

</html>

Learning resources

UG

Stacked Bar Chart User Guide

Learn the available options to customize the React stacked bar chart.

API

Stacked Bar Chart API Reference

Explore the React stacked bar chart APIs.

Explore all Syncfusion React components

Explore over 140+ React UI components featuring established, and production-ready controls built for modern web app development.

Scroll up icon
Syncfusion Feedback