How to create React Horizontal Bar Chart?
Bar chart is oriented in a horizontal manner using rectangular bars. It is used to show trend data and the comparison of multiple data sets. It is easy to compare sets of data between different groups.
Let’s see, how to create simple horizontal bar chart in react.
Step-1: React project configuration
For more details, please click here.
Step-2: Creating Chart Container
Create a container for chart to get render. You can find out the index.html which located on root/public/index.html
index.html <html> <body> // Chart container <div id="root"></div> </body> </html>
Step-3: Creating the chart
Basic Horizontal Bar Chart
Consider the following data to be rendered the horizontal bar chart.
Library Visitors Summary | |
Months | Number of Visitors |
Jan | 50 |
Feb | 57 |
Mar | 48 |
Apr | 60 |
May | 70 |
Jun | 48 |
Here are the steps for creating the chart:
- Navigate to App.js which location is “root/src/App.js”.
- Import require packages from “@syncfusion/ej2-react-charts”.
- Bind the data using dataSource property in series.
- Bind the Months and no.of visitors values of data source with xName and yName properties
- You can select chart types (like line, column, area, bar etc..) using type property in series.
- Inject require modules on services property.
- Now append the chart instance to the container to render the chart.
- Run npm start, the application will open in the localhost:3000.
root/src/App.js
import {
ChartComponent, SeriesCollectionDirective, SeriesDirective, Inject,
Category, BarSeries
} from '@syncfusion/ej2-react-charts';
import * as React from 'react';
let data = [{ x: 'Jan', y: 50 }, { x: 'Feb', y: 57 }, { x: 'Mar', y: 48 }, { x: 'Apr', y: 60 },
{ x: 'May', y: 70 }, { x: 'Jun', y: 48 }];
class App extends React.Component {
render() {
return (<ChartComponent
primaryXAxis={{
valueType: "Category",
title: "Months"
}}
primaryYAxis={{
title: "Number of Visitors"
}}
>
<Inject services={[BarSeries, Category]} />
<SeriesCollectionDirective>
<SeriesDirective dataSource={data} xName='x' yName='y' type='Bar'>
</SeriesDirective>
</SeriesCollectionDirective>
</ChartComponent>);
}
}
export default App;
Screenshot
Step-4: Customizing horizontal bar chart
Adding Chart Title
Add title to the chart, to provide quick information about the data plotted in the chart.
class App extends React.Component {
render() {
return (<ChartComponent
title='Library Visitors Summary'
>
</ChartComponent>);
}
}
Adding Tooltip
The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the enable property as true in tooltip object.
Now import and inject the Tooltip module into the project.
import {Tooltip} from '@syncfusion/ej2-react-charts';
class App extends React.Component {
render() {
return (<ChartComponent
tooltip={{ enable: true }}
<Inject services={[Tooltip]} />
>
</ChartComponent>);
}
}
Adding data label
You can add data labels to improve the readability of the chart. This can be achieved by setting the visible property to true in the dataLabel object.
Now import and inject the DataLabel module into the project.
import {DataLabel} from '@syncfusion/ej2-react-charts';
class App extends React.Component {
render() {
return (<ChartComponent
<Inject services={[DataLabel]} />
<SeriesCollectionDirective>
<SeriesDirective marker={{ dataLabel: { visible: true } }}>
</SeriesDirective>
</SeriesCollectionDirective>
>
</ChartComponent>);
}
}
Changing the color of the bar chart
As per your wise, you can change the color of the bar chart. It's going to look amazing and interactive. By using the fill property, color changes can be achieved.
class App extends React.Component {
render() {
return (<ChartComponent
<SeriesCollectionDirective>
<SeriesDirective fill='#cc99ff'>
</SeriesDirective>
</SeriesCollectionDirective >
>
</ChartComponent >);
}
}
Customizing the border
You can set the horizontal bar's specific color and thickness. It will highlight every bar. Using the color and width properties of the border object, you can set the color and thickness of the bar chart border.
class App extends React.Component {
render() {
return (<ChartComponent
<SeriesCollectionDirective>
<SeriesDirective border = {{ color: 'black', width: 4 }}>
</SeriesDirective>
</SeriesCollectionDirective >
>
</ChartComponent >);
}
}
Applying various colors to the bar chart
Every data point in the bar chart can be given the specific color which helps to easily identify and compare the data points. You can give the color of each data point in the data source, and then bind the color with pointColorMapping property.
let data = [{ x: 'Jan', y: 50, color: '#c6e2b6' }, { x: 'Feb', y: 57, color: '#99c4ff' },
{ x: 'Mar', y: 48, color: '#a4f4d9' }, { x: 'Apr', y: 60, color: '#99fffb' },
{ x: 'May', y: 70, color: '#ffaf99' }, { x: 'Jun', y: 48, color: '#ff99b0' }];
class App extends React.Component {
render() {
return (<ChartComponent
<SeriesCollectionDirective>
<SeriesDirective pointColorMapping='color'>
</SeriesDirective>
</SeriesCollectionDirective >
>
</ChartComponent >);
}
}
