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.