React 18 Histogram / Segmented Columns Chart Tutorial

Last Updated on March 4, 2024 by Digamber in React JS

In this tutorial, you will learn how to display data in a histogram chart in React app.

We will teach you how to create the histogram chart component in React app. To build the segmented chart, we will use the React Google chart library.

Let us understand what a histogram chart is? The histogram chart looks very much similar to the bar chart; however, its purpose is diffrent.

The typical use case of a histogram chart is to show the frequency distribution, and It typically shows each diffrent value in a set of data that occurs.

Google’s chart library offers the best solution for building the segmented chart; we will show you how to use the React google chart plugin to create the histogram chart.

How to Create Histogram or Segmented Columns Chart in React with Google Charts

• 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
• Step 6: Run React App

Create React Project

Let us start the first step by creating a new React project.

npx create-react-app histogram-chart

Then, get to the project’s root.

cd histogram-chart

Add Bootstrap Plugin

You may install and use the bootstrap package using the given command.

npm install bootstrap --legacy-peer-deps

After installing the bootstrap package, import the bootstrap library in App.js file.

import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

Install Google Charts Library

In this step, you will be using the given command and install the React Google chart package in the react.

npm install react-google-charts --legacy-peer-deps

Create Histogram Chart Component

To embed the segmented chart, you have to create the components/HistogramChart.js file.

After creating the file, add the entire code into the file.

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

Update App Js

Next, we have to register 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

Run React App

At last eventually, you have to invoke the React server. You can do it by using the following command.

npm start

Conclusion

Histogram charts are handy and used when you have numerical data; they are best to check the shape of the data’s distribution.

In this guide, you have learned how to draw a histogram chart with data in React app.

We understood how to use google charts in React with React Google chart package.