React Js Google Column Chart Example

In this tutorial, you will learn how to create column charts in react js application using google charts apis.

How to Create and Use Google Column Charts in React Js

Steps to create column chart using google charts apis:

Step 1 – Create React App

If you don’t have a React application set up in your system, run the following commands to create a new React app:

npx create-react-app my-react-app

To run the React app:

npm start

Check out your React app on this URL: localhost:3000

Step 2 – Install and Set Up react-google-charts

Run the following command to install Google Charts library:

npm install bootstrap

# npm
npm install react-google-charts

# yarn
yarn add react-google-charts

Step 3 – Create Google Column Charts Component

Create column chart component named GoogleChart.js in src directory, and then add google charts js library to implement column chart in it:

import React, { Component } from "react";
import Chart from "react-google-charts";
const data = [
  ['Year', 'Visitations', { role: 'style' } ],
  ['2010', 10, 'color: gray'],
  ['2020', 14, 'color: #76A7FA'],
  ['2030', 16, 'opacity: 0.2'],
  ['2040', 22, 'stroke-color: #703593; stroke-width: 4; fill-color: #C5A5CF'],
  ['2050', 28, 'stroke-color: #871B47; stroke-opacity: 0.6; stroke-width: 8; fill-color: #BC5679; fill-opacity: 0.2']
];
class GoogleChart extends Component {
  
  constructor(props) {
    super(props)
  }
  render() {
      return (
          <div className="container mt-5">
              <h2>Google Column Chart in React Js</h2>
              <Chart
                  width={700}
                  height={320}
                  data={data}
                  chartType="ColumnChart"
                  loader={<div>Loading Chart...</div>}                
              />
          </div>
      )
  }
}
export default GoogleChart;

Step 4 – Import Component in App.js

In this step, you need to import GoogleChart.js file in src/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;

Now you can run this application and test it on browser.

Conclusion

That’s it, you have learned how to install react google chats in react app and how to create google column charts component in react js app.

Recommended React JS Tutorials