React Js Google Line and Box Intervals Charts Tutorial

In this quick tutorial, we will learn how to create interval charts in React application. We will show you the code example of the line interval chart and box interval chart. To build the interval chart component, we will use google charts.

React is a popular framework and makes your development work less tedious; you will feel fantastic while working with this framework. Building features in React is convenient. This user-friendly guide will show how easy it is to build interval chart components in react.

How to Create Google Intervals Charts in React Js App

• Step 1: Create 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 Application

Create React Project

In the first step, we will show you how to create the new react app.

You may use the suggested command to install the brand new app.

npx create-react-app interval-chart

Install Bootstrap Plugin

This step is not required; however, if you don’t want to spend time writing CSS code, this package is worth using.

npm install bootstrap

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';

Add Google Charts Package

Next, you have to add the React Google chart library. To install the package, jump on to the command prompt and execute the given command.

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Create Intervals Charts Component

There are variety of interval charts, in this step we will teach you how to create line interval chart and box interval chart.

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

We have created the component file, now 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

Similarly, you can easily create the box interval chart, you have to add the provided code into your 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

Register Component in App Js

In this step, you have to open the App.js; in this file, we will show you how to register the chart component file.

Add the given code into the 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

Start Application

The process of interval chart creation is completed; now, you need to start the react app and check the charts on the browser.

npm start

Conclusion

In this tutorial, we have learned how to show data using the line interval and box interval charts in React application. We found out how to create the interval chart component using the React Google chart package.

We shared only two interval chart integration methods. However, there are a couple of more interval charts that may be useful for you. You can check out more interval charts examples here.