React Google Chart: A Complete Guide to Interactive Data Visualizations

Technology Blogs

React Google Chart is a powerful and easy-to-use tool for creating interactive and responsive data visualizations in web applications. It enables developers to present dynamic data effectively, making it a popular choice for building data-rich React applications. In this blog, we’ll guide you through setting up Google Charts in React and explore various chart types available in its library.

Why Google Charts?

Google Charts offers several benefits, such as:

  • Ease of Use: Minimal configuration is needed to generate high-quality charts.
  • Interactivity: Charts are interactive, allowing users to hover over data points, zoom, and more.
  • Customizability: Each chart can be extensively customized.
  • Cross-browser Compatibility: Works seamlessly across different browsers.

You can easily unlock these benefits when integrating React Google Chart into your applications.

Getting Started with Google Charts in React

Step 1: Install Google Charts Library

To start using React Google Chart, install the react-google-charts package, which provides React components for the Google Charts library.

npm install react-google-charts

Related read: Unlock the Power of npm: Turn Your React Components into a Library

Step 2: Import and Use Basic Google Charts

After installing the package, you can easily integrate charts by importing the necessary components.

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


function App() {
  const data = [
    ["Year", "Sales", "Expenses"],
    ["2017", 1000, 400],
    ["2018", 1170, 460],
    ["2019", 660, 1120],
    ["2020", 1030, 540],
  ];


  const options = {
    title: "Company Performance",
    curveType: "function",
    legend: { position: "bottom" },
  };


  return (
    <div>
      <h1>Google Charts in React</h1>
      <Chart
        chartType="LineChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
    </div>
  );
}

export default App;

Basic Line Chart Example

The code above generates a simple Line Chart. It takes data and options as props. The data is an array where the first element is the header (for columns), and the subsequent elements represent the data rows.

Advanced Customizations with React Google Chart

Google Charts provides several options to customize the appearance and behavior of your charts. Let’s explore these options with some examples of advanced charts.

➡️ Bar Chart with Custom Colors and Tooltips

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


function CustomBarChart() {
  const data = [
    ["City", "2010 Population", "2000 Population"],
    ["New York City, NY", 8175000, 8008000],
    ["Los Angeles, CA", 3792000, 3694000],
    ["Chicago, IL", 2695000, 2896000],
    ["Houston, TX", 2099000, 1953000],
    ["Philadelphia, PA", 1526000, 1517000],
  ];


  const options = {
    title: "Population of Largest U.S. Cities",
    chartArea: { width: "50%" },
    colors: ["#b0120a", "#ffab91"],
    hAxis: {
      title: "Total Population",
      minValue: 0,
    },
    vAxis: {
      title: "City",
    },
    tooltip: {
      isHtml: true,
      textStyle: {
        color: "#000",
        fontSize: 14,
      },
    },
 };


 return (
   <div>
     <h2>Bar Chart with Custom Colors and Tooltips</h2>
     <Chart
        chartType="BarChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
     />
   </div>
  );
}

export default CustomBarChart;

In this bar chart:

  • The colors option lets us assign custom colors to each data series.
  • The tooltip option allows custom HTML formatting for tooltips.
  • ChartArea ensures the chart is well-spaced and the axis titles don’t overlap with chart elements.

➡️ Pie Chart with Custom Slices and 3D Effect

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


function CustomPieChart() {
  const data = [
    ["Task", "Hours per Day"],
    ["Work", 11],
    ["Eat", 2],
    ["Commute", 2],
    ["Watch TV", 2],
    ["Sleep", 7],
  ];


  const options = {
    title: "My Daily Activities",
    is3D: true,
    slices: {
      1: { offset: 0.2 }, // "Eat" slice
      3: { offset: 0.1 }, // "Watch TV" slice
    },
  };


  return (
    <div>
      <h2>Pie Chart with 3D Effect</h2>
      <Chart
        chartType="PieChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
    </div>
  );
}

export default CustomPieChart;

Here:

  • The is3D: true option adds a 3D effect to the Pie Chart.
  • The slices object allows for customization of individual pie slices, like adding an offset to highlight a specific section.

➡️ Geo Chart with Region Customization

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


function GeoChartExample() {
  const data = [
    ["Country", "Popularity"],
    ["Germany", 200],
    ["United States", 300],
    ["Brazil", 400],
    ["Canada", 500],
    ["France", 600],
    ["RU", 700],
  ];


  const options = {
    colorAxis: { colors: ["#e7711c", "#4374e0"] }, // Orange to blue gradient
    backgroundColor: "#81d4fa", // Light blue background
    datalessRegionColor: "#f8bbd0", // Pink for regions with no data
    defaultColor: "#f5f5f5", // Default grey color for other regions
  };


  return (
    <div>
      <h2>Geo Chart with Region Customization</h2>
      <Chart
        chartType="GeoChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
    </div>
  );
}

export default GeoChartExample;

In this Geo Chart:

  • The colorAxis option controls the gradient for data values.
  • We use datalessRegionColor and backgroundColor to customize the colors of regions without data and the chart’s background.

➡️ Combo Chart (Bar and Line Combined)

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


function ComboChart() {
  const data = [
    ["Month", "Bolivia", "Ecuador", "Average"],
    ["2020/01", 165, 938, 614.6],
    ["2020/02", 135, 1120, 682],
    ["2020/03", 157, 1167, 623],
    ["2020/04", 139, 1110, 609.4],
    ["2020/05", 136, 691, 569.6],
  ];


  const options = {
    title: "Monthly Coffee Production by Country",
    vAxis: { title: "Cups" },
    hAxis: { title: "Month" },
    seriesType: "bars",
    series: { 2: { type: "line" } },
    colors: ["#1c91c0", "#e7711b", "#f1ca3a"],
  };


  return (
    <div>
      <h2>Combo Chart (Bar and Line)</h2>
      <Chart
        chartType="ComboChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
    </div>
  );
}

export default ComboChart;

In this chart:

  • We combine bar and line chart types using seriesType: “bars” and series: { 2: { type: “line” } }.
  • The third series (Average) represents a line, while the first two are bars.

Transform Your Data Into Stunning Visualizations With React Google Chart

Get in Touch

Advanced Customizations in Google Charts

➡️ Inverting Axes

Inverting axes can be useful when switching between horizontal and vertical axes. You can do this with both bar charts and line charts by changing the hAxis and vAxis properties.

Example: Horizontal to Vertical Inversion in Bar Chart.

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


function InvertedBarChart() {
  const data = [
    ["City", "2010 Population", "2000 Population"],
    ["New York City, NY", 8175000, 8008000],
    ["Los Angeles, CA", 3792000, 3694000],
    ["Chicago, IL", 2695000, 2896000],
    ["Houston, TX", 2099000, 1953000],
    ["Philadelphia, PA", 1526000, 1517000],
  ];


  const options = {
    title: "Population of Largest U.S. Cities",
    chartArea: { width: "50%" },
    colors: ["#b0120a", "#ffab91"],
    hAxis: {
      title: "Total Population",
      minValue: 0,
  }, 
  vAxis: {
    title: "City",
  },
  isStacked: true, // Stack bars to show cumulative population
  orientation: 'horizontal', // Invert the bars to make them horizontal
};


return (
  <div>
    <h2>Inverted Bar Chart</h2>
     <Chart
        chartType="BarChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
     />
   </div>
 );
}

export default InvertedBarChart;

Explanation:

  • orientation: ‘horizontal’: This option inverts the chart, turning a standard vertical bar chart into a horizontal one.
  • isStacked: true: This stacks the bars in the chart, which can be useful for comparison.

➡️ Customizing Axes Ranges and Format

You can fine-tune the axes ranges and formats to fit specific data requirements, such as displaying currency, percentages, or date formats.

Example: Custom Axis Formats in Line Chart.

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


function LineChartWithCustomAxes() {
  const data = [
    ["Year", "Sales", "Expenses"],
    ["2017", 1000, 400],
    ["2018", 1170, 460],
    ["2019", 660, 1120],
    ["2020", 1030, 540],
  ];


  const options = {
    title: "Company Performance",
    curveType: "function",
    legend: { position: "bottom" },
    hAxis: {
      title: "Year",
      format: "####", // Custom format for year
   },
   vAxis: {
     title: "Amount (in $)",
     minValue: 0,
     maxValue: 2000,
     format: "currency", // Format values as currency
   },
   colors: ["#1c91c0", "#e7711b"],
};


return (
  <div>
    <h2>Line Chart with Custom Axes</h2>
    <Chart
      chartType="LineChart"
      data={data}
      options={options}
      width="100%"
      height="400px"
    />
  </div>
 );
}

export default LineChartWithCustomAxes;

Explanation:

  • hAxis.format: “####”: Customizes the format of the x-axis to display the year as a four-digit number.
  • vAxis.format: “currency”: Formats the y-axis values as currency, so they are automatically prefixed with a dollar sign.

➡️ Customizing Tooltips with HTML

Google Charts allows you to fully customize tooltips by using custom HTML. You can control what gets displayed and how it’s styled.

Example: Line Chart with Custom HTML Tooltips.

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


function CustomTooltipChart() {
  const data = [
    ["Year", "Sales", { role: "tooltip", p: { html: true } }],
    ["2017", 1000, "<div style='padding:10px'><b>Sales:</b> $1000</div>"],
    ["2018", 1170, "<div style='padding:10px'><b>Sales:</b> $1170</div>"],
    ["2019", 660, "<div style='padding:10px'><b>Sales:</b> $660</div>"],
    ["2020", 1030, "<div style='padding:10px'><b>Sales:</b> $1030</div>"],
  ];


  const options = {
    title: "Company Sales with Custom Tooltips",
    curveType: "function",
    tooltip: { isHtml: true }, // Enable HTML tooltips
    legend: { position: "bottom" },
  };


  return (
    <div>
      <h2>Line Chart with Custom HTML Tooltips</h2>
      <Chart
        chartType="LineChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
   </div>
  );
}

export default CustomTooltipChart;

Explanation:

  • HTML Tooltips: The tooltip object allows us to use custom HTML for each tooltip. In this example, tooltips are styled with div elements, and the role: “tooltip” key in the data array specifies that custom tooltips should be used.

➡️ Dual Y-Axis Customization (Combo Charts)

You may want to display data that requires two different Y-axes (such as sales and percentage growth). Google Charts’ ComboChart type allows for this customization.

Example: Combo Chart with Dual Y-Axis.

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


function DualAxisComboChart() {
  const data = [
    ["Year", "Sales", "Expenses", "Profit %"],
    ["2017", 1000, 400, 25],
    ["2018", 1170, 460, 35],
    ["2019", 660, 1120, 15],
    ["2020", 1030, 540, 30],
  ];


  const options = {
    title: "Company Sales, Expenses, and Profit %",
    seriesType: "bars",
    series: {
      2: { type: "line", targetAxisIndex: 1 }, // Profit on second Y-axis
    },
    vAxes: {
      0: { title: "Sales/Expenses (in $)" },
      1: { title: "Profit %" }, // Secondary Y-axis for profit
    },
    colors: ["#1b9e77", "#d95f02", "#7570b3"],
  };


  return (
    <div>
      <h2>Combo Chart with Dual Y-Axis</h2>
      <Chart
        chartType="ComboChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
      />
   </div>
  );
}

export default DualAxisComboChart;

Explanation:

  • targetAxisIndex: 1: This places the third series (profit percentage) on the secondary Y-axis.
  • vAxes: This option defines both Y-axes, with labels for each. You can use as many axes as necessary to plot different data scales on a single chart.

➡️ Dynamic Chart with Real-Time Data Updates

You can easily integrate dynamic data that updates your charts in real-time. Using state hooks in React, charts can be rendered based on changing data.

Example: Real-Time Line Chart.

import React, { useEffect, useState } from "react";
import { Chart } from "react-google-charts";


function RealTimeChart() {
  const [data, setData] = useState([
    ["Time", "Stock Price"],
    ["0", 0],
  ]);


  useEffect(() => {
    let count = 1;
    const interval = setInterval(() => {
      setData((prevData) => [
        ...prevData,
        [count.toString(), Math.floor(Math.random() * 1000)],
      ]);
      count++;
   }, 1000);


   return () => clearInterval(interval);
}, []);


const options = {
   title: "Real-Time Stock Price",
   curveType: "function",
   hAxis: { title: "Time (Seconds)" },
   vAxis: { title: "Stock Price (USD)" },
   legend: { position: "none" },
};


return (
  <div>
    <h2>Real-Time Line Chart</h2>
    <Chart
      chartType="LineChart"
      data={data}
      options={options}
      width="100%"
      height="400px"
    />
  </div>
 );
}

export default RealTimeChart;

Explanation:

  • useEffect and setInterval: The useEffect hook is used to dynamically update the
coma

Conclusion

Google Charts offers a powerful way to create interactive and customizable charts in your React application. With react-google-charts, the integration is seamless, and the variety of chart types and customizations allow you to meet any data visualization needs. By combining different chart types, and customizing colors, tooltips, axes, and more, you can create a dynamic and user-friendly interface for presenting data.

Vimu Kale

Associate Software Developer

Vimu is a Full-stack developer with 2 years of experience in React JS, Redux toolkit, MUI, NodeJS, Express, and MongoDB. He specializes in creating efficient full-stack applications with sleek components. When he’s not coding, he enjoys eating Jackfruit and keeping up with the latest tech trends.

How-To-Hire-Remote-Developers

How to Effectively Hire and Manage a Remote Team of Developers.

Download Now

Keep Reading

Technology Blogs
15 React Native Features You Can’t Miss to Accelerate Mobile Development Journey
Read More
Technology Blogs
A Beginner’s Guide to End-to-End Testing React Components with Cypress
Read More
Technology Blogs
A Complete Guide to Build the First React Native App
Read More

Keep Reading

Technology Blogs
15 React Native Features You Can’t Miss to Accelerate Mobile Development Journey
Read More
Technology Blogs
A Beginner’s Guide to End-to-End Testing React Components with Cypress
Read More
Technology Blogs
A Complete Guide to Build the First React Native App
Read More
  • Service
  • Career

  • Let's create something together!

  • We’re looking for the best. Are you in?

quote

The team at Mindbowser was highly professional, patient, and collaborative throughout our engagement. They struck the right balance between offering guidance and taking direction, which made the development process smooth. Although our project wasn’t related to healthcare, we clearly benefited...

author

Dan Barnes

Founder, Texas Ranch Security

quote

Mindbowser played a crucial role in helping us bring everything together into a unified, cohesive product. Their commitment to industry-standard coding practices made an enormous difference, allowing developers to seamlessly transition in and out of the project without any confusion....

author

David Hoffman

CEO, MarketsAI

quote

I'm thrilled to be partnering with Mindbowser on our journey with TravelRite. The collaboration has been exceptional, and I’m truly grateful for the dedication and expertise the team has brought to the development process. Their commitment to our mission is...

author

Marc Ott

Founder & CEO, TravelRite

quote

The Mindbowser team's professionalism consistently impressed me. Their commitment to quality shone through in every aspect of the project. They truly went the extra mile, ensuring they understood our needs perfectly and were always willing to invest the time to...

author

Spencer Barns

CTO, New Day Therapeutics

quote

I collaborated with Mindbowser for several years on a complex SaaS platform project. They took over a partially completed project and successfully transformed it into a fully functional and robust platform. Throughout the entire process, the quality of their work...

author

David Rhodes

President, E.B. Carlson

quote

Mindbowser and team are professional, talented and very responsive. They got us through a challenging situation with our IOT product successfully. They will be our go to dev team going forward.

author

Dan Munro

Founder, Cascada

quote

Amazing team to work with. Very responsive and very skilled in both front and backend engineering. Looking forward to our next project together.

author

Anthony Lewis

Co-Founder, Emerge

quote

The team is great to work with. Very professional, on task, and efficient.

author

Matthew Holsclaw

Founder, PeriopMD

quote

I can not express enough how pleased we are with the whole team. From the first call and meeting, they took our vision and ran with it. Communication was easy and everyone was flexible to our schedule. I’m excited to...

author

Angela Boudreaux

Founder, Seeke

quote

We had very close go live timeline and Mindbowser team got us live a month before.

author

Shaz Khan

CEO, BuyNow WorldWide

quote

If you want a team of great developers, I recommend them for the next project.  

author

Vladimir Kudryavtsev

Founder, Teach Reach

quote

Mindbowser built both iOS and Android apps for Mindworks, that have stood the test of time. 5 years later they still function quite beautifully. Their team always met their objectives and I'm very happy with the end result. Thank you!

author

Bart Mendel

Founder, Mindworks

quote

Mindbowser has delivered a much better quality product than our previous tech vendors. Our product is stable and passed Well Architected Framework Review from AWS.

author

Pankaj Parashar

CEO, PurpleAnt

quote

I am happy to share that we got USD 10k in cloud credits courtesy of our friends at Mindbowser. Thank you Pravin and Ayush, this means a lot to us.

author

Sudheer Bandaru

CTO, Shortlist

quote

Mindbowser is one of the reasons that our app is successful. These guys have been a great team.

author

Dave Dubier

Founder & CEO, MangoMirror

quote

Kudos for all your hard work and diligence on the Telehealth platform project. You made it possible.

author

Joyce Nwatuobi

CEO, ThriveHealth

quote

Mindbowser helped us build an awesome iOS app to bring balance to people’s lives.

author

Addie Wootten

CEO, SMILINGMIND

quote

They were a very responsive team! Extremely easy to communicate and work with!

author

Kristen M.

Founder & CEO, TotTech

quote

We’ve had very little-to-no hiccups at all—it’s been a really pleasurable experience.

author

Chacko Thomas

Co-Founder, TEAM8s

quote

Mindbowser was very helpful with explaining the development process and started quickly on the project.

author

Hieu Le

Executive Director of Product Development, Innovation Lab

quote

The greatest benefit we got from Mindbowser is the expertise. Their team has developed apps in all different industries with all types of social proofs.

author

Alex Gobel

Co-Founder, Vesica

quote

Mindbowser is professional, efficient and thorough. 

author

MacKenzie Richter

Consultant, XPRIZE

quote

Very committed, they create beautiful apps and are very benevolent. They have brilliant Ideas.

author

Laurie Mastrogiani

Founder, S.T.A.R.S of Wellness

quote

Mindbowser was great; they listened to us a lot and helped us hone in on the actual idea of the app. They had put together fantastic wireframes for us.

author

Bennet Gillogly

Co-Founder, Flat Earth

quote

Ayush was responsive and paired me with the best team member possible, to complete my complex vision and project. Could not be happier.

author

Katie Taylor

Founder, Child Life On Call

quote

The team from Mindbowser stayed on task, asked the right questions, and completed the required tasks in a timely fashion! Strong work team!

author

Michael Wright

CEO, SDOH2Health LLC

quote

Mindbowser was easy to work with and hit the ground running, immediately feeling like part of our team.

author

George Hodulik

CEO, Stealth Startup

quote

Mindbowser was an excellent partner in developing my fitness app. They were patient, attentive, & understood my business needs. The end product exceeded my expectations. Thrilled to share it globally.

author

Jirina Harastova

Owner, Phalanx

quote

Mindbowser's expertise in tech, process & mobile development made them our choice for our app. The team was dedicated to the process & delivered high-quality features on time. They also gave valuable industry advice. Highly recommend them for app development...

author

Marty Betz

Co-Founder, Fox&Fork