Syncfusion Feedback

React Charts 100 Stacked Area Chart

Overview

The React 100% stacked area chart displays multiple data series as stacked areas, 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 precise comparisons.

Zoom and pan

Zooming and panning features allow users to explore specific regions of large datasets for detailed analysis.

Missing data handling

React 100% stacked area charts gracefully handle missing data by supporting empty points, ensuring continuity in visualization.

Vertical 100% stacked area chart

The chart can be transposed vertically to offer an alternative perspective on the data.

Styling options

Customize chart colors and borders using built-in APIs to match the design needs.

React 100% stacked area chart code example

Get started with the React 100% stacked area chart using a few lines of TSX code, as shown below. You can also explore this React 100% stacked area 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: 'CHN', y: 32 },
      { x: 'GER', y: 15 },
      { x: 'RUS', y: 30 },
      { x: 'BRZ', y: 16 },
      { x: 'IND', y: 25 }
    ];
    const data2 = [
      { x: 'CHN', y: 10 },
      { x: 'GER', y: 15 },
      { x: 'RUS', y: 35 },
      { x: 'BRZ', y: 10 },
      { x: 'IND', y: 15 }
    ];
    return (
        <Chart>
            <ChartPrimaryXAxis valueType='Category'>
            </ChartPrimaryXAxis>
            <ChartSeriesCollection>
              <ChartSeries dataSource={data1} xField="x" yField="y" type="StackingArea100" />
              <ChartSeries dataSource={data2} xField="x" yField="y" type="StackingArea100" />
            </ChartSeriesCollection>
        </Chart>
    )
}

Learning resources

UG

React 100% Stacked Area Chart User Guide

Learn the available options for customizing React 100% stacked area charts.

API

React 100% stacked area chart API references

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