Creating charts using google charts in ReactJS

Introduction

Data visualization is an important concept, especially in situations where statistics are involved. And google charts have made it easy. It is a great way to present data and engage an audience.

React and Google Charts work together to enable developers to create engaging and reusable data visualizations like bar charts, pie charts, bubble plots, and more.

The react-google-charts npm library provides an extensive set of customization options with a rich chart gallery. It ranges from simple line graphs to more complex hierarchical tree maps. Its utilization in real world react applications is easy for any developer.

Getting Started;

Set up your react application if you do not have one already by inputting the code below in your terminal;

npx create-react-app react-google-chart

If you have an already set-up application then you just need to add the react-google-charts package using the code below;

npm install --save react-google-charts

For a more complex chart application React Hook and Use Complex are also used depending on your use case.

If you’re using one or multiple charts inside the same component, even if as child components, the hook approach can work fine. However, if you’re using multiple charts spread in different components, the best approach would be to use the context. In our case, only a display of a single chart-case data is needed so neither is used.

Now, we are all set to start using Google Charts to visualize our data. First, we create a new file called charts.jsx in the src directory where we’ll build our charts.

Code Example

//Charts.jsx

import { Chart } from "react-google-charts";

const Charts = () => {
  const data = [
    ["Schedule", "Hours per Day"],
    ["Study", 11],
    ["Exercise", 1],
    ["Eat", 3],
    ["Play", 2],
    ["Sleep", 8]
  ];
  const options = {
    title: "My Daily Schedule"
  };
  return (
    <Chart
      chartType="PieChart"
      data={data}
      options={options}
      width={"100%"}
      height={"400px"}
    />
  );
};
export default Charts;

//App.js
import Charts from "./charts";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>React-google-chart Example</h1>
      <h3>An Activities Pie Chart </h3>
      <Charts />
    </div>
  );
}

Code Explanation

We import react-google-charts and get the Chart property.

Next, we create a data variable that will house the data to be displayed on the pie chart. The pie chart is highly customizable. For a more complex chart, you only need to update the data to the array.

With Chart, you can pass props to update the data shown by the chart, as well as change the chart’s look and feel. The chartType prop allows you to change the type of chart being displayed.

Therefore, if we passed Barchart instead, a bar chart would be displayed. data accepts the data of the chart and options accepts an object that we can further customize.

Lastly, as their respective names imply, width and height change the dimension

We then imported and rendered the charts.js component before finally importing the charts.jsx file into our main App.js

Rerun your application; You should see the google charts pie chart data displayed in your application.

      Creating charts using Google Charts in ReactJS ♥♥

Click here to Tweet this

Live Demo