Overview
The React column chart is a commonly used chart type for comparing data across categories, such as frequency, totals, or averages. It is particularly effective for visualizing changes in an item’s value over time.
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.
Back-to-back column chart
Display data bi-directionally within a column chart to enable clear comparison and analysis of values.
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.
Grouped columns
Columns with the same group name can be visually clustered under a shared category, allowing comparison of subcategories within each main category.
Styling options
Use built-in APIs to customize the appearance of the column chart, improving readability and presentation.
React column chart code example
Quickly get started with the React column chart using a few lines of TSX code, as shown below. You can also explore this React 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 data = [
{ x: 'GER', y: 172 },
{ x: 'RUS', y: 300 },
{ x: 'BRZ', y: 239 },
{ x: 'IND', y: 462 },
{ x: 'CHN', y: 621 }
];
return (
<Chart>
<ChartPrimaryXAxis valueType='Category'>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries dataSource={data} xField="x" yField="y" type="Column" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
