Overview
The React stacked area chart is a chart with y-values stacked on top of one another in series order. It shows the relationship between individual values and the total of the points.
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.
Zoom and pan
Zooming and panning features allow users to explore specific regions of large datasets for detailed analysis.
Missing data handling
React stacked area charts gracefully handle missing data by supporting empty points, ensuring continuity in the visual.
Vertical chart
The chart can be transposed vertically to offer an alternative perspective on the data.
Styling options
Customize line colors and border using built-in APIs to match your design.
React stacked area chart code example
Get started with the React stacked area chart using a few lines of TSX code, as shown below. You can also explore this React 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="StackingArea" />
<ChartSeries dataSource={data2} xField="x" yField="y" type="StackingArea" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Learn the available options for customizing React stacked area charts.
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
