React Js Histogram/Segmented Columns Chart Tutorial
In this React Js tutorial, we will get to know how to display the data in a histogram chart in React app. For this, we will see how to create the histogram chart component in a React app. We will use the React Google Chart Library.
Let’s understand what’s a histogram chart is. The typical use case of a histogram chart is to show the frequency distribution and it typically shows each different value in a set of data that occurs.
The Google Chart Library offers the best solution for building the segmented chart. We will also learn how to use the React Google Chart Plugin to create the histogram chart.
How To Create Histogram/Segmented Column Charts In React With Google Charts
See the following steps in order to implement the above-mentioned:
Step 1: Create React Project
Step 2: Add Bootstrap Plugin
Step 3: Install Google Charts Library
Step 4: Create Histogram Chart Component
Step 5: Update App Js File
Step 6: Run React App
Step 1- Create React Project
In this step, we will install a new React project. If you are already done with it, then jump on to the next step:
npx create-react-app histogram-chart
Now, after we have downloaded the new react app, we will get to the project’s root:
cd histogram-chart
Step 2- Add Bootstrap Plugin
Further, we may use Bootstrap CSS to style the layout. for which we will have to execute the following command:
Bootstrap is a free and open-source CSS framework focussed on responsive, mobile-first front-end web development.
npm install bootstrap
Here, we open the App.js file and import the Bootstrap library:
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
Step 3- Install Google Charts Library
Without installing the React Google charts package, we will not be able to build the charts. Below given is the command that we will invoke to add the package into the React app.
# npm
npm install react-google-charts
# yarn
yarn add react-google-charts
Step 4- Create Histogram Chart Component
Here, in this step, we have to create components/folder. After that, we will create the HistogramChart.js into this file.
Now, since that component is ready, we will add all the given code into it:
import React, { Component } from 'react'
import Chart from 'react-google-charts'
const HistogramData = [
['Quarks', 'Leptons', 'Gauge Bosons', 'Scalar Bosons'],
[2 / 3, -1, 0, 0],
[2 / 3, -1, 0, null],
[2 / 3, -1, 0, null],
[-1 / 3, 0, 1, null],
[-1 / 3, 0, -1, null],
[-1 / 3, 0, null, null],
[-1 / 3, 0, null, null],
]
const chartOptions = {
title: 'Charges of subatomic particles',
legend: { position: 'top', maxLines: 2 },
colors: ['#5C3292', '#1A8763', '#871B47', '#999999'],
interpolateNulls: false,
}
class HistogramChart extends Component {
render() {
return (
<div className="container mt-5">
<h2>React Histogram Chart Example</h2>
<Chart
width={'600px'}
height={'320px'}
chartType="Histogram"
loader={<div>Loading Chart</div>}
data={HistogramData}
options={chartOptions}
rootProps={{ 'data-testid': '5' }}
/>
</div>
)
}
}
export default HistogramChart
Step 5- Update App Js File
Here, we will add the HistogramChart component in the App.js file:
import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import HistogramChart from './components/HistogramChart'
function App() {
return (
<div className="App">
<HistogramChart />
</div>
)
}
export default App
Step 6- Run React App
In this step, we to see how does the histogram chart looks on the browser.
For that, we need to evoke the development server starting command:
npm start
Summary
Various types of charts and graphs help us to deal with simple as well as complex information.
So, histogram charts are quite handy and are used when we have numerical data. They are the best to check the shape of the data’s distribution.
Thanks