React JS Tutorial- Google Line And Box Intervals Charts Example

In this tutorial, we will learn how to create interval charts and box interval charts. We will be using the code example of these charts in this guide. We will use the Google Charts package.

How To Create Google Intervals Charts In React Js App

Step 1- Create New React Project

Step 2- Install Bootstrap Plugin

Step 3- Add Google Charts Package

Step 4- Create Intervals Charts Component

Step 5- Register Component In App JS

Step 6- Start React App

Step 1- Create A New React Project

If you are a novice in creating the React app, then you have to follow this step by simply installing a new React app by using the below command. Otherwise, simply jump onto the next step:

npx create-react-app interval-chart

Step 2- Install Bootstrap Plugin

In this step, we would install the bootstrap plugin which is going to save some time which, otherwise, we would have wasted writing CSS:

npm install bootstrap

Further, we open the App.js file and import the bootstrap path on top of the app js file:

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

Step 3- Add Google Charts Package

As it’s already clear that we have to install the Google Charts package in this step. For this, we will jump onto the command prompt and use the given command:

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Step 4- Create Intervals Charts Component

Here, we will learn to create a line interval chart and box interval chart.

Firstly, we get into the src folder and create the components/IntervalChart.js file.

So, we have created the component file. Now, we get the given code and add into the IntervalChart.js for integrating the line interval chart:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const LineData = [
  [
    { type: 'number', label: 'x' },
    { type: 'number', label: 'values' },
    { id: 'i0', type: 'number', role: 'interval' },
    { id: 'i1', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
  ],
  [1, 100, 90, 110, 85, 96, 104, 120],
  [2, 120, 95, 130, 90, 113, 124, 140],
  [3, 130, 105, 140, 100, 117, 133, 139],
  [4, 90, 85, 95, 85, 88, 92, 95],
  [5, 70, 74, 63, 67, 69, 70, 72],
  [6, 30, 39, 22, 21, 28, 34, 40],
  [7, 80, 77, 83, 70, 77, 85, 90],
  [8, 100, 90, 110, 85, 95, 102, 110],
]
const chartOptions = {
  title: 'Line intervals, default',
  curveType: 'function',
  lineWidth: 4,
  intervals: { style: 'line' },
  legend: 'none',
}
class IntervalChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Line Interval Chart Example</h2>
        <Chart
          width={'700px'}
          height={'320px'}
          chartType="LineChart"
          loader={<div>Loading Chart</div>}
          data={LineData}
          options={chartOptions}
          rootProps={{ 'data-testid': '1' }}
        />
      </div>
    )
  }
}
export default IntervalChart

Likewise, we can simply create the box interval chart. We have to add the given code into our React js component file:

import React, { Component } from 'react'
import Chart from 'react-google-charts'
const BoxData = [
  [
    { type: 'number', label: 'x' },
    { type: 'number', label: 'values' },
    { id: 'i0', type: 'number', role: 'interval' },
    { id: 'i1', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
    { id: 'i2', type: 'number', role: 'interval' },
  ],
  [1, 100, 90, 110, 85, 96, 104, 120],
  [2, 120, 95, 130, 90, 113, 124, 140],
  [3, 130, 105, 140, 100, 117, 133, 139],
  [4, 90, 85, 95, 85, 88, 92, 95],
  [5, 70, 74, 63, 67, 69, 70, 72],
  [6, 30, 39, 22, 21, 28, 34, 40],
  [7, 80, 77, 83, 70, 77, 85, 90],
  [8, 100, 90, 110, 85, 95, 102, 110],
]
const chartOptions = {
  series: [{ color: '#1A8763' }],
  intervals: { lineWidth: 1, barWidth: 1, style: 'boxes' },
  legend: 'none',
}
class IntervalChart extends Component {
  render() {
    return (
      <div className="container mt-5">
        <h2>React Box Interval Chart Example</h2>
        <Chart
          width={'100%'}
          height={'320px'}
          chartType="LineChart"
          loader={<div>Loading Chart</div>}
          data={BoxData}
          options={chartOptions}
          rootProps={{ 'data-testid': '4' }}
        />
      </div>
    )
  }
}
export default IntervalChart

Step 5- Register Component In App Js

Next, we need to open the App.js file. We will see how to register the chart component file:

import React from 'react'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import IntervalChart from './components/IntervalChart'
function App() {
  return (
    <div className="App">
      <IntervalChart />
    </div>
  )
}
export default App

Step 6-Start React App

Since we have completed this tutorial, now we need to start the React app using the below command:

npm start

Conclusion

So, friends, it is hoped that this tutorial seemed quite easy and smooth to you. In a few steps only, we have tried to explain how to show data using the line interval and box interval charts in React apps.

Thanks