Syncfusion Feedback

React Charts 100 Stacked Column Chart

Overview

The React 100% stacked column chart displays multiple data series as stacked columns with the cumulative value of all elements always equaling 100%. The x-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, allowing multiple grouped stacks to appear side by side for easier comparison across categories.

Spacing and width

Adjust the spacing between columns and customize column widths to improve visual clarity and enhance the user interface design.

Rounded corners

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

Styling options

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

React 100% stacked column chart code example

Get started with the React 100% stacked column chart using a few lines of TSX code, as shown below. You can also explore this React 100% stacked column 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="StackingColumn100" />
              <ChartSeries dataSource={data2} xField="x" yField="y" type="StackingColumn100" />
            </ChartSeriesCollection>
        </Chart>
    )
}

Learning resources

UG

React 100% Stacked Column Chart User Guide

Learn about the options available to customize the React 100% stacked column chart.

API

React 100% stacked column chart API Reference

Explore the React 100% stacked column 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