React Google Column Chart Example

React.js

Nicesnippets

295

19-03-2021


React Google Column Chart Example

Hi Guys,

Today, I will learn you how to use the google chart column in react. We will show an example of a google column chart in react. you can easily use google column chart in react. We will install the react-google-charts package for react google column chart.I will explain step by step react google column chart example.

Now, I will give you a full example of a simple google column chart using react as below.

Install Package


In this step,I will install package react-google-charts for following command.

npm i react-google-charts

App.js

import React from 'react';

import Chart from "react-google-charts";

const data = [

["Element", "Density", { role: "style" }],

["Copper", 8.94, "#b87333"], // RGB value

["Silver", 10.49, "silver"], // English color name

["Gold", 19.3, "gold"],

["Platinum", 21.45, "color: #e5e4e2"] // CSS-style declaration

];

function App() {

return (

<div className="container">

<h1>React Google Column Chart Example - NiceSnippets.com</h1>

<Chart

width={600}

height={300}

chartType="ColumnChart"

loader={<div>Loading Chart</div>}

data={data}

/>

</div>

);

}

export default App;

It will help you....