Syncfusion Feedback

React Charts 100 Stacked Bar Chart

Overview

The React 100% stacked bar chart displays multiple data series as stacked bars with the cumulative value of all elements always equaling 100%. The y-axis is consistently rendered with a range of 0–100 for accurate comparison.

Multiple data series

Multiple data series can be plotted within a single chart, allowing users to compare different datasets. Enabling features like legends and tooltips provides additional insights into each series.

Data markers

Data points can be marked using built-in shapes: circles, rectangles, ellipses, vertical and horizontal lines, diamonds, triangles, pentagons, crosses, and plus signs. Custom images can also be used to enhance visual appeal.

Data labels

Data labels offer contextual information for each data point and can be rotated to a specified angle for better readability.

Dual axes

Multiple axes can be used to plot datasets with significantly different value ranges, enabling clearer comparisons.

Grouped stacking

Bars that share the same stacking group can be layered together, enabling multiple grouped stacks to appear side by side for easier comparison of categories.

Spacing and width

Adjust the spacing between bars and customize bar widths to enhance visual clarity and user interface design.

Rounded corners

Apply rounded corners to bars for a modern and visually appealing chart design.

Styling options

Use built-in APIs to customize the appearance of the bar chart, improving readability and presentation.

React 100% stacked bar chart code example

Get started with the React 100% stacked bar chart using a few lines of TSX code, as shown below. You can also explore this React 100% stacked bar chart example to learn how to render and customize the chart in a React application.

import { Chart, ChartPrimaryXAxis, ChartSeriesCollection, ChartSeries } from '@syncfusion/react-charts';

export default function App() {
    const data1 = [
      { x: '2014', y: 111.1 },
      { x: '2015', y: 127.3 },
      { x: '2016', y: 143.4 },
      { x: '2017', y: 159.9 }
    ];
    const data2 = [
      { x: '2014', y: 76.9 },
      { x: '2015', y: 99.5 },
      { x: '2016', y: 121.7 },
      { x: '2017', y: 142.5 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Category'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data1} xField="x" yField="y" type="StackingBar100" />
              <ChartSeries dataSource={data2} xField="x" yField="y" type="StackingBar100" />
            </ChartSeriesCollection>
        </Chart>
    )
}

Learning resources

UG

React 100% Stacked Bar Chart User Guide

Learn the available options for customizing a React 100% stacked bar chart.

API

React 100% stacked bar chart API reference

Explore the React 100% stacked bar chart APIs.

Pure React Components

Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.

Scroll up icon