React React Charts Stacked Column Chart

Overview

React Stacked Column Chart display y-values stacked in series order. Individual contributions can be compared against the cumulative total across categories.

Multiple series

Plot multiple series in a single chart to compare different datasets. Legends identify each series, while tooltips display values and related details for individual 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

Multiple axes allow different data sets with varying value ranges to be plotted within the same chart.

Stacking group

Group a series with another series separately using a different group name.

Spacing and width

Customize spacing between two columns and the width of the columns.

Rounded corners

Modernize the UI by applying rounded corners to the stacked column.

Cylindrical stacked columns

Modernize the UI by displaying value as cylindrical-shaped data points.

Customization

Customize the appearance of the Stacked Column Chart by adjusting color and border properties through built-in APIs.

React Stacked Column Chart code example

Get started with the React Stacked Column Chart using a few simple lines of JavaScript code, as demonstrated below. Also explore demo to learn how to render and configure the component.

import {AxisModel,Category,ChartComponent,Inject,SeriesCollectionDirective, SeriesDirective, StackingColumnSeries} 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={[StackingColumnSeries, Category]} />
      <SeriesCollectionDirective>
      <SeriesDirective dataSource={this.data1} xName='x' yName='y' type='StackingColumn'/>
      <SeriesDirective dataSource={this.data2} xName='x' yName='y' type='StackingColumn'/>
      </SeriesCollectionDirective>
    </ChartComponent>
  }
};
ReactDOM.render(
  <App />,
  document.getElementById('charts') as HTMLElement
);
<!DOCTYPE html>
<html>

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

</html>

Learning resources

UG

Stacked Column Chart User Guide

Learn the available options to customize React Stacked Column Chart.

API

Stacked Column Chart API Reference

Explore the React Stacked Column 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