Overview
The React stacked bar chart displays y-values stacked in sequence, allowing users to see both individual segment values and their cumulative total. This is useful for understanding how each part contributes to the whole.
Multiple series
Plot multiple data series within a single chart to compare various datasets. Enabling legends and tooltips provides detailed information for 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 across 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 stacked bar chart code example
Quickly get started with the React stacked bar chart using a few lines of TSX code, as shown below. You can also explore this React 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="StackingBar" />
<ChartSeries dataSource={data2} xField="x" yField="y" type="StackingBar" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
