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.
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
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';
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
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
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
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
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.
In this quick tutorial, we will show you how to quite easily add the active…
In this tutorial, we will learn how to create a Redux Store in React application.…
This detailed guide will cover how to create the Load More button and display data…
In this tutorial, we will step by step learn how to configure redux persist in…
In this comprehensive tutorial, we will learn how to persist redux store's states in React…
In this guide, we are going to learn how to add dark mode and light…