1. Install the React Google Charts package
The first step is to install the React Google Charts package. This package provides a React component that wraps the Google Charts library. To install it, run the following command in your terminal:
npm install react-google-charts
2. Create a React component
Next, create a React component that will render the Google Stacked Bar Chart. This component will accept props for the data and options that will be used to create the chart.
import React from ‘react’;
import { Chart } from ‘react-google-charts’;
const StackedBarChart = (props) => {
const { data, options } = props;
return (
);
};
export default StackedBarChart;
3. Pass data and options to the component
Now that you have a React component that will render the Google Stacked Bar Chart, you need to pass the data and options to it. The data should be an array of arrays, and the options should be an object.
const data = [
[‘Year’, ‘Sales’, ‘Expenses’, ‘Profit’],
[‘2014’, 1000, 400, 200],
[‘2015’, 1170, 460, 250],
[‘2016’, 660, 1120, 300],
[‘2017’, 1030, 540, 350],
];
const options = {
title: ‘Company Performance’,
hAxis: { title: ‘Year’, titleTextStyle: { color: ‘#333’ } },
vAxis: { minValue: 0 },
// For the legend to fit, we make the chart area smaller
chartArea: { width: ‘50%’, height: ‘70%’ },
isStacked: true,
};
4. Render the component
Finally, render the component in your React application.
import React from ‘react’;
import StackedBarChart from ‘./StackedBarChart’;
const App = () => {
return (
);
};
export default App;
React js Google stacked bar chats example; Through this tutorial, you will learn how to create a google stacked bar chart in react js application.
Google chart library offers a robust and profound way to visualize data on web applications. Be it simple charts or more complex charts, fret not, Google charts don’t lack anywhere.
How to Implement Google Bar Charts in React Js Application
Follow the following steps to create google stacked bar charts in react js app:
- Step 1 – Create React App
- Step 2 – Install Bootstrap & react-google-charts Package
- Step 3 – Create Google Stacked Charts Component
- Step 4 – Add Component in App.js
Step 1 – Create React App
In this step, open your terminal and execute the following command on your terminal to create a new react app:
npx create-react-app my-react-app
To run the React app, execute the following command on your terminal:
npm start
Check out your React app on this URL: localhost:3000
Step 2 – Install Bootstrap & react-google-charts Package
Execute the following command to install react-bootstrap and google charts package into your react app:
npm install bootstrap # npm npm install react-google-charts # yarn yarn add react-google-charts
Step 3 – Create Google Stacked bar Charts Component
Visit the src directory of your react js app and create google stacked bar chart component named GoogleBarChart.js. And add the following code into it:
import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
['City', '2010 Population', '2000 Population'],
['New York City, NY', 8175000, 8008000],
['Los Angeles, CA', 3792000, 3694000],
['Chicago, IL', 2695000, 2896000],
['Houston, TX', 2099000, 1953000],
['Philadelphia, PA', 1526000, 1517000],
];
class GoogleBarChart extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className="container mt-5">
<h2>React Basic Bar Chart with Multiple Series</h2>
<Chart
width={'700px'}
height={'320px'}
chartType="BarChart"
loader={<div>Loading Chart</div>}
data={data}
options={{
title: 'Population of Largest U.S. Cities',
chartArea: { width: '50%' },
hAxis: {
title: 'Total Population',
minValue: 0,
},
vAxis: {
title: 'City',
},
}}
rootProps={{ 'data-testid': '1' }}
/>
</div>
)
}
}
export default GoogleBarChart;
The above given code imports the React library and the Component class from it, as well as the Chart component from the “react-google-charts” library. The Chart component allows for the creation of interactive and customizable charts using the Google Charts API.
The code then defines a data variable which contains an array of arrays representing the data for the chart. The first array contains the column headers for the chart, while the subsequent arrays contain the data for each row.
Next, the code defines a class called “GoogleBarChart” which extends the Component class from React. This class defines a constructor method that calls the constructor of the parent class using the “super” keyword.
The render method of this class returns a container div element containing a heading and the Chart component. The Chart component is passed various props including the width and height of the chart, the type of chart to be rendered, the data to be displayed, and various options for customizing the chart’s appearance.
Finally, the GoogleBarChart class is exported as the default export of the module, which allows it to be imported and used in other files.
Step 4 – Add Component in App.js
In this step, you need to add GoogleBarChart.js file in src/App.js file:
import React from 'react';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import GoogleBarChart from './components/GoogleBarChart';
function App() {
return (
<div className="App">
<GoogleBarChart />
</div>
);
}
export default App;
Conclusion
Throughout this tutorial, you have learned how to create react bar chart component in react js application using google charts library.
