React Js Tutorial- Histogram/Segmented Columns Chart Example

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