Google Charts is best known for providing an eloquent way to visualize data on your website. In this tutorial, we will help you learn how to integrate Arrow Format and Bar Format charts in React application. Formatters charts are easy to embed in React app, and we will use the React Google Charts package to install arrow and bar format charts.
Google Charts gives a free interactive web service that helps you build graphical charts from user-provided information or data. Google charts are JavaScript based; typically user provides the data and a formatting specification to create the graphs.
In this React arrow and bar chart example, we will show you how to set up the React Google charts package in the react app. Build a react app and add the format charts such as arrows and bar charts from scratch.
We hope you have created the react app; if not, go ahead and execute the command to download a new react app.
npx create-react-app react-chart
Let us cd project_name into the app folder.
cd react-chart
Now, this package is totally optional, you can use the Bootstrap library and use its grid system to help creating the layout.
Type and run command to install the package.
npm install bootstrap
Import the bootstrap css into the App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
</div>
);
}
export default App;
In the further step, we have to add the Google charts library to react application using the following command.
# npm
npm install react-google-charts
# yarn
yarn add react-google-charts
To embed the chart in React, requires you to create components/ directory, and a GoogleChart.js file within the components folder.
Now, we will show you the code example of the Google Arrow Format chart, and you have to add the given code in the GoogleChart.js file.
import React, { Component } from 'react'
import Chart from 'react-google-charts'
const data = [
['Department', 'Revenues Change'],
['Shoes', { v: 12, f: '12.0%' }],
['Sports', { v: -7.3, f: '-7.3%' }],
['Toys', { v: 0, f: '0%' }],
['Electronics', { v: -2.1, f: '-2.1%' }],
['Food', { v: 22, f: '22.0%' }],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Arrow Format Chart Example</h2>
<Chart
width={'650px'}
height={'350px'}
chartType="Table"
data={data}
loader={<div>Loading Chart</div>}
formatters={[
{
type: 'ArrowFormat',
column: 1,
},
]}
options={{
allowHtml: true,
showRowNumber: true,
}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
)
}
}
export default GoogleChart
You can also use the Google column chart package for creating the Bar Format chart in React js; here is the code you can define into the GoogleChart.js file.
import React, { Component } from 'react'
import Chart from 'react-google-charts'
const data = [
['Department', 'Revenues Change'],
['Shoes', 10700],
['Sports', -15400],
['Toys', 12500],
['Electronics', -2100],
['Food', 22600],
['Art', 1100],
];
class GoogleChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Bar Format Chart Example</h2>
<Chart
width={'650px'}
height={'350px'}
chartType="Table"
loader={<div>Loading Chart</div>}
data={data}
formatters={[
{
type: 'BarFormat',
column: 1,
options: {
width: 120,
},
},
]}
options={{
allowHtml: true,
showRowNumber: true,
width: '100%',
height: '100%',
}}
rootProps={{ 'data-testid': '2' }}
/>
</div>
)
}
}
export default GoogleChart
The main component is the App component in the react, therefore we will register our chart component within the App.js file.
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleChart from './components/GoogleChart';
function App() {
return (
<div className="App">
<GoogleChart />
</div>
);
}
export default App;
We have integrated the Google chart in react app, now you need to start the React application.
npm start
In this tutorial, we have learned how to build chart components and demonstrated how to implement the Arrow Format and Bar Format charts in React app.
We hope this guide will help you and uplift your knowledge on this specific topic.
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…