React Google Charts: A Tool for Effective Data Visualization

In web development, data visualization is crucial in making sense of large data. One popular library that has been making waves in this area is React Google Charts. React Google Charts is a thin-typed React wrapper for Google Charts, a powerful and highly customizable library for creating charts and data visualizations.

React Google Charts is a library that provides bindings for Google Charts to be used in React applications. It allows developers to create interactive charts with a simple and intuitive API. The library includes a variety of chart types, including line charts, bar charts, scatter charts, and pie charts, among others.

Getting Started with React Google Charts

Before we can start creating stunning data visualizations with React Google Charts, we need to get it installed in our project. The installation process is straightforward and can be done using your favourite package manager, either npm or yarn.

Installing React Google Charts

To install React Google Charts, you need to have a React application set up. If you don't have one, you can create a new React application using Create React App.

Copy
1npx create-react-app react-google-charts-app

Once you have your React application ready, you can install React Google Charts.

Using npm install save react google charts

If you're using npm as your package manager, run the following command in your project directory to install React Google Charts:

Copy
1npm install --save react-google-charts

Using yarn add react google charts

If you prefer using yarn, you can install React Google Charts by running the following command in your project directory:

Copy
1yarn add react-google-charts

Setting up the React App

After installing React Google Charts, the next step is to set up your React app to use it. First, you must import the Chart component from 'react-google-charts ' in the file where you want to use it.

Copy
1import { Chart } from 'react-google-charts';

Now, you can use the Chart component in your React app to create various charts. The Chart component accepts several props, including chartType, which specifies the type of chart to display; data, an array of arrays representing the data to display in the chart; and options, an object that can contain various configuration options for the chart.

Creating Your First Chart with React Google Charts

The Data Prop and Data State

The data prop is an array of arrays representing the data you want to display in the chart. The first array in data represents the column names, and each subsequent array represents a row of data. For example, here's what the data prop might look like for a bar chart showing sales over several years:

Copy
1const data = [
2  ['Year', 'Sales'],
3  ['2019', 1000],
4  ['2020', 1170],
5  ['2021', 660],
6  ['2022', 1030],
7];

In this case, 'Year' and 'Sales' are the column names, and each subsequent array represents a year and the sales for that year.

The data prop can also be managed using React's state, allowing you to update the chart as your data changes dynamically:

Copy
1import { useState } from 'react';
2import { Chart } from 'react-google-charts';
3
4function App() {
5  const [data, setData] = useState([
6    ['Year', 'Sales'],
7    ['2019', 1000],
8    ['2020', 1170],
9    ['2021', 660],
10    ['2022', 1030],
11  ]);
12
13  // ... code to update data ...
14
15  return (
16    <Chart
17      width={'500px'}
18      height={'300px'}
19      chartType="BarChart"
20      loader={<div>Loading Chart</div>}
21      data={data}
22      // ... other props ...
23    />
24  );
25}
26
27export default App;

The ChartType Prop

The chartType prop determines what type of chart to display. It takes a string that corresponds to one of the chart types supported by Google Charts. For example, to create a bar chart, you would set chartType to 'BarChart':

Copy
1<Chart
2  width={'500px'}
3  height={'300px'}
4  chartType="BarChart"
5  loader={<div>Loading Chart</div>}
6  data={data}
7  // ... other props ...
8/>
9

You can find a list of all supported chart types in the Google Charts documentation .

Displaying the First Chart

With the data and chartType props set, you can display your first chart.

Here's what the complete code might look like:

Copy
1import { Chart } from 'react-google-charts';
2
3function App() {
4  const data = [
5    ['Year', 'Sales'],
6    ['2019', 1000],
7    ['2020', 1170],
8    ['2021', 660],
9    ['2022', 1030],
10  ];
11
12  return (
13    <div className="App">
14      <Chart
15        width={'500px'}
16        height={'300px'}
17        chartType="BarChart"
18        loader={<div>Loading Chart</div>}
19        data={data}
20        options={{
21          title: 'Sales Performance',
22          chartArea: { width: '50%' },
23          hAxis: {
24            title: 'Total Sales',
25            minValue: 0,
26          },
27          vAxis: {
28            title: 'Year',
29          },
30        }}
31      />
32    </div>
33  );
34}
35
36export default App;
37

This code creates a bar chart showing sales over several years. The options prop is used to customize the appearance and behavior of the chart. In this case, we're setting the title of the chart, the width of the chart area, and the titles and minimum values of the horizontal and vertical axes.

Exploring Different Types of Google Charts

React Google Charts offers a variety of chart types to suit different data visualization needs.

Pie Chart

Pie charts are excellent for displaying proportional data. They divide a circle into multiple slices that represent different categories. The size of each slice is proportional to the quantity it represents.

Here's an example of how to create a pie chart with React Google Charts:

Copy
1import { Chart } from 'react-google-charts';
2
3function App() {
4  const data = [
5    ['Task', 'Hours per Day'],
6    ['Work', 8],
7    ['Eat', 2],
8    ['Commute', 3],
9    ['Gym', 3],
10    ['Sleep', 8],
11  ];
12
13  return (
14    <Chart
15      width={'500px'}
16      height={'300px'}
17      chartType="PieChart"
18      loader={<div>Loading Chart</div>}
19      data={data}
20      options={{
21        title: 'My Daily Activities',
22      }}
23    />
24  );
25}
26
27export default App;
28

Bar Chart

In the preceding sections, we saw an example of a bar chart. Bar charts are excellent for comparing volumes in several categories. Each bar represents a category, and its length correlates to the quantity of that category.

Line Chart

Line charts are used to display trends over time. Each point in the line corresponds to a data value, and lines connect the points.

Here's an example of a line chart showing sales over several years:

Copy
1import { Chart } from 'react-google-charts';
2
3function App() {
4  const data = [
5    ['Year', 'Sales'],
6    ['2019', 1000],
7    ['2020', 1170],
8    ['2021', 660],
9    ['2022', 1030],
10  ];
11
12  return (
13    <Chart
14      width={'500px'}
15      height={'300px'}
16      chartType="LineChart"
17      loader={<div>Loading Chart</div>}
18      data={data}
19      options={{
20        title: 'Sales Performance',
21        hAxis: {
22          title: 'Year',
23        },
24        vAxis: {
25          title: 'Sales',
26        },
27      }}
28    />
29  );
30}
31
32export default App;
33

Scatter Chart

Scatter charts plot data points on a horizontal and vertical axis to demonstrate how much one variable influences another. A marker represents each row in the data table, the location of which is determined by the values of the columns on the horizontal and vertical axes.

Here's an example of a scatter chart:

Copy
1import { Chart } from 'react-google-charts';
2
3function App() {
4  const data = [
5    ['Age', 'Weight'],
6    [8, 12],
7    [4, 5.5],
8    [11, 14],
9    [4, 5],
10    [3, 3.5],
11    [6.5, 7],
12  ];
13
14  return (
15    <Chart
16      width={'500px'}
17      height={'300px'}
18      chartType="ScatterChart"
19      loader={<div>Loading Chart</div>}
20      data={data}
21      options={{
22        title: 'Age vs. Weight comparison',
23        hAxis: { title: 'Age' },
24        vAxis: { title: 'Weight' },
25        legend: 'none',
26      }}
27    />
28  );
29}
30
31export default App;
32

Advanced Features of React Google Charts

React Google Charts is not just about creating simple charts. It also provides several advanced features to help you build more complex data visualizations.

Creating Multiple Charts

React Google Charts allows you to create multiple charts in a single component. This can be useful when comparing different data sets side by side. To create multiple charts, you need to render multiple Chart components:

Copy
1import { Chart } from 'react-google-charts';
2
3function App() {
4  const data1 = [
5    ['Year', 'Sales'],
6    ['2019', 1000],
7    ['2020', 1170],
8    ['2021', 660],
9    ['2022', 1030],
10  ];
11
12  const data2 = [
13    ['Task', 'Hours per Day'],
14    ['Work', 8],
15    ['Eat', 2],
16    ['TV', 4],
17    ['Gym', 2],
18    ['Sleep', 8],
19  ];
20
21  return (
22    <div className="App">
23      <Chart
24        width={'500px'}
25        height={'300px'}
26        chartType="LineChart"
27        loader={<div>Loading Chart</div>}
28        data={data1}
29        options={{
30          title: 'Sales Performance',
31          hAxis: {
32            title: 'Year',
33          },
34          vAxis: {
35            title: 'Sales',
36          },
37        }}
38      />
39      <Chart
40        width={'500px'}
41        height={'300px'}
42        chartType="PieChart"
43        loader={<div>Loading Chart</div>}
44        data={data2}
45        options={{
46          title: 'My Daily Activities',
47        }}
48      />
49    </div>
50  );
51}
52
53export default App;
54

Building a Full Fledged Dashboard

React Google Charts can also be used to build a full-fledged dashboard with multiple interconnected charts. This can be achieved by managing the data for all charts in a central state and updating this state based on user interactions.

Customization Options and Cross-browser Compatibility

React Google Charts provides a wide range of customization options. You can customize the appearance of your charts using the options prop, which accepts an object with various configuration options. For example, you can set the title of the chart, the labels of the axes, the colors of the data series, and much more.

In addition to its customization options, React Google Charts also boasts excellent cross-browser compatibility. It works on all modern browsers, including Chrome, Firefox, Safari, and Edge, ensuring your charts look and work consistently across all platforms.

Working with Data in React Google Charts

One of the key aspects of working with React Google Charts is managing and manipulating data.

Importing Data from an External Source

React Google Charts allows you to import data from an external source, such as an API or a JSON file. This can be done using the fetch function or any other method you prefer to fetch data. Once the data is fetched, it can be set in the state and passed to the Chart component via the data prop.

Here's an example of fetching data from a JSON file and displaying it in a line chart:

Copy
1import { useState, useEffect } from 'react';
2import { Chart } from 'react-google-charts';
3
4function App() {
5  const [data, setData] = useState([]);
6
7  useEffect(() => {
8    fetch('/data.json')
9      .then(response => response.json())
10      .then(data => setData(data));
11  }, []);
12
13  return (
14    <Chart
15      width={'500px'}
16      height={'300px'}
17      chartType="LineChart"
18      loader={<div>Loading Chart</div>}
19      data={data}
20      options={{
21        title: 'Sales Performance',
22        hAxis: {
23          title: 'Year',
24        },
25        vAxis: {
26          title: 'Sales',
27        },
28      }}
29    />
30  );
31}
32
33export default App;
34

Updating App with New Data

React Google Charts makes it easy to update your charts with new data. Since the data prop is reactive, any changes to the data will automatically update the chart. This can be done by updating the state that holds the data.

Here's an example of updating the data for a chart when a button is clicked:

Copy
1import { useState } from 'react';
2import { Chart } from 'react-google-charts';
3
4function App() {
5  const [data, setData] = useState([
6    ['Year', 'Sales'],
7    ['2019', 1000],
8    ['2020', 1170],
9    ['2021', 660],
10    ['2022', 1030],
11  ]);
12
13  const updateData = () => {
14    setData([
15      ['Year', 'Sales'],
16      ['2019', 1200],
17      ['2020', 1300],
18      ['2021', 900],
19      ['2022', 1500],
20    ]);
21  };
22
23  return (
24    <div className="App">
25      <Chart
26        width={'500px'}
27        height={'300px'}
28        chartType="LineChart"
29        loader={<div>Loading Chart</div>}
30        data={data}
31        options={{
32          title: 'Sales Performance',
33          hAxis: {
34            title: 'Year',
35          },
36          vAxis: {
37            title: 'Sales',
38          },
39        }}
40      />
41      <button onClick={updateData}>Update Data</button>
42    </div>
43  );
44}
45
46export default App;
47

Conclusion: The Power of React Google Charts

React Google Charts is a powerful tool for creating interactive and highly customizable data visualizations in React applications. By leveraging the capabilities of Google Charts and providing a React-friendly API, it simplifies integrating charts into your React apps.