Overview
The React bar chart is a widely used chart type for comparing categories of data, such as frequency, totals, or averages, represented through horizontal bars. It is especially useful 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 bar chart
Display data bi-directionally to facilitate clear comparison and analysis of values.
Spacing and width
Adjust the spacing between bars and customize bar widths to enhance visual clarity and the UI design.
Rounded corners
Apply rounded corners to bars for a modern and visually appealing chart design.
Grouped bar
Bars 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 bar chart, improving readability and presentation.
React bar chart code example
Quickly get started with the React bar chart using a few lines of TSX code, as shown below. You can also explore this React 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 data = [
{ x: 'GER', y: 172 },
{ x: 'RUS', y: 300 },
{ x: 'BRZ', y: 439 },
{ x: 'IND', y: 262 },
{ x: 'CHN', y: 721 }
];
return (
<Chart>
<ChartPrimaryXAxis valueType='Category'>
</ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries dataSource={data} xField="x" yField="y" type="Bar" />
</ChartSeriesCollection>
</Chart>
)
}Learning resources
Pure React Components
Developed using React’s core principles, this library employs functional components and hooks without any external dependencies.
