In this article, we will learn how to add a ColumnChart using google charts.
A column chart is a vertical bar chart that is displayed in the user’s browser using either SVG or VML, depending on the browser’s capabilities. As with all Google charts, when a user hovers over the data, column charts provide tooltips.
–First of all, we have to create a react application.
-Then import the below package into your project.
npm install --save react-google-charts
-Now open your app.js file and add the below code:
import React from 'react' import { Chart } from "react-google-charts"; function App() { var coverData = ([ ['Element', 'Density', { role: "style" }], ['data1', 200000, '#e9ecef'], ['data2', 300000, '#1F3968'], ]); var coverOption = { width: 260, title: '', legend: { position: 'none' }, vAxis: { format: 'short', baseline: 40, minValue: 50000 , maxValue: 350000, baseline: { color: 'red', }, }, hAxis: { minValue: 50000 , maxValue: 350000, }, }; return ( <> <h1> ColumnChart </h1> <Chart className='abc' chartType="ColumnChart" width="100%" height="305px" data={coverData} options={coverOption} /> </> ) } export default App
coloring columns:
-we have set customized colors in our chat.
var coverData = ([ ['Element', 'Density', { role: "style" }], ['data1', 200000, '#e9ecef'], ['data2', 300000, '#1F3968'], ]);
here our third parameter is defined color. we can set the RGB value and color name.
OUTPUT: