Overview
The React stacked column chart displays x-values stacked in sequence, allowing users to see both individual segment values and their cumulative total. This is useful for visualizing how each component contributes to the overall values for each category.
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
Columns that belong to the same stacking group can be layered together, enabling multiple grouped stacks to appear side by side for easier comparison across different categories.
Spacing and width
Customize the spacing between columns and adjust their widths to enhance visual clarity.
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 stacked column chart code example
Quickly get started with the React stacked column chart using a few lines of TSX code, as shown below. You can also explore this React 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="StackingColumn" />
<ChartSeries dataSource={data2} xField="x" yField="y" type="StackingColumn" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Stacked column chart user guide
Learn the available options to customize React stacked column charts.
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
