Hello Dev.
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.
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 - meaningarticles.com</h1>
<Chart
width={600}
height={300}
chartType="ColumnChart"
loader={<div>Loading Chart</div>}
data={data}
/>
</div>
);
}
export default App;
i'm hoping it assist you to, thanks for visit my article if you like my article then proportion together with your friend and social platform.