How To Add ColumnChart In ReactJs

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: