React Google Charts Wrapper

Common errors

• TypeError: (0 , react_google_charts__WEBPACK_IMPORTED_MODULE_2__.Chart) is not a function

  cause Attempting to use `Chart` as a default import when it is a named export, especially in projects configured for ESM.
  fix Change your import statement from `import Chart from 'react-google-charts';` to `import { Chart } from 'react-google-charts';`.

• Error: google.charts.load() called multiple times with different settings.

  cause Multiple instances of `react-google-charts` or other libraries are trying to load the Google Charts loader with conflicting settings. This often happens in larger applications or micro-frontends.
  fix Ensure that `google.charts.load` is called only once with a consistent configuration across your application. You might need to coordinate loading or use a single top-level `Chart` component to manage the loader.

• Error: [react-google-charts]: A 'chartType' prop is required.

  cause The `Chart` component was rendered without specifying the `chartType` prop, which is mandatory for Google Charts to know which type of chart to render.
  fix Always provide a valid `chartType` prop, e.g., `<Chart chartType="BarChart" ... />`.

• Warning: Failed prop type: Invalid prop `data` supplied to `Chart`. Expected an array of arrays.

  cause The `data` prop provided to the `Chart` component is not in the expected Google Charts DataTable format (an array where the first element is headers and subsequent elements are rows).
  fix Ensure your `data` prop is an array of arrays, with the first inner array typically being the column headers and subsequent arrays being the data rows, e.g., `data={[['x', 'y'], [1, 2], [3, 4]]}`.

Warnings

• breaking Version 4.0.0 dropped support for UMD bundles and older browsers (e.g., Internet Explorer). The package now primarily uses native ES Modules (ESM).
  Fix: Ensure your project is configured to handle ES Modules and your target browser environment is modern. Update your import statements from CommonJS `require()` to ESM `import`.
• gotcha Prior to v5.1.0, event listeners were not always correctly added and removed, potentially leading to memory leaks or incorrect behavior when props changed or components unmounted.
  Fix: Upgrade to v5.1.0 or newer to benefit from the fix that uses `useEffect` for managing event listeners. This ensures proper cleanup and re-initialization.
• gotcha In versions prior to 5.0.0, charts might not re-draw correctly when data, columns, or rows props changed, leading to stale visualizations.
  Fix: Update to version 5.0.0 or later, which includes fixes to ensure charts re-draw reliably on relevant prop changes, including data, columns, and rows.
• gotcha Some versions experienced an infinite loading issue while the Google Charts script was being loaded.
  Fix: Upgrade to version 4.0.6 or newer, which includes mitigations for the infinite loading issue. If the problem persists, ensure no other scripts are interfering with Google's `loader.js`.
• deprecated The `charteditor` package was removed from default `chartPackages` in version 3.0.6, and docs were updated accordingly.
  Fix: If you relied on `charteditor`, you might need to explicitly load it or review alternative solutions if your use case requires it. Check the updated documentation for guidance.

Install

• npm install react-google-charts npm
• yarn add react-google-charts yarn
• pnpm add react-google-charts pnpm

Imports

• Chart
  wrong:

  const Chart = require('react-google-charts').Chart; // Incorrect for modern React apps, especially post v4.0.0
  import Chart from 'react-google-charts'; // Common mistake, Chart is a named export

  correct:

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

  The primary component for rendering charts is a named export. Since v4.0.0, the package primarily supports ES Modules, dropping UMD bundles and older browser support.
• GoogleChartWrapper
  wrong:

  import GoogleChartWrapper from 'react-google-charts'; // Not a default export

  correct:

  import { GoogleChartWrapper } from 'react-google-charts';

  Used for more advanced scenarios or when direct access to the Google Charts wrapper instance is needed. It's a named export.
• ChartEvent

  import type { ChartEvent } from 'react-google-charts';

  TypeScript users will often import `ChartEvent` or other type definitions for strong typing of event handlers and chart options.

Quickstart

This quickstart demonstrates how to render a basic Line Chart using `react-google-charts`, providing data and options.

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

function MyChartComponent() {
  const data = [
    ["Year", "Sales", "Expenses"],
    ["2004", 1000, 400],
    ["2005", 1170, 460],
    ["2006", 660, 1120],
    ["2007", 1030, 540]
  ];

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

  return (
    <div style={{ width: '100%', maxWidth: '800px', margin: '0 auto' }}>
      <h2>Sales & Expenses Over Time</h2>
      <Chart
        chartType="LineChart"
        data={data}
        options={options}
        width="100%"
        height="400px"
        legendToggle
      />
    </div>
  );
}

export default MyChartComponent;