Use Google Charts

Google charts context loader for React components, loosely typed. Simplifies loading of google charts in a React component, you only need to write the callback part. For more info on google charts, visit https://developers.google.com/chart/interactive/docs.

If you 👍 or use this project, consider giving it a ★, thanks! 🙌

Installation

npm i --save @eisberg-labs/use-google-charts

Usage

This example shows how to render a geo chart https://developers.google.com/chart/interactive/docs/gallery/geochart

export default function BasicExample(){
  const exampleRef = useRef<HTMLDivElement>();
  useGoogleCharts(() => {
    const data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

    const chart = new google.visualization.GeoChart(exampleRef.current);

    chart.draw(data, {});}, {
    'packages':['geochart'],
  })

  return (
    <>
      <h4>GeoChart Example</h4>
      <div ref={exampleRef}></div>
    </>
  )
}

Api

Function useGoogleCharts takes loadCallback: Function, props: google.LoadOptions and optional version: string | number.

• loadCallback - function without arguments and void result.
• LoadOptions - defined in @types/google.visualization, e.g. { 'packages':['geochart'], }.
• version - 'current' if not specified.

License

MIT © Eisberg Labs

Examples

use-google-charts-example.tsx

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

4.0.2 (2023-01-25)

Note: Version bump only for package @eisberg-labs/use-google-charts

4.0.0 (2023-01-25)

Note: Version bump only for package @eisberg-labs/use-google-charts

3.1.1 (2023-01-04)

Note: Version bump only for package @eisberg-labs/use-google-charts

3.1.0 (2023-01-03)

Features

• use-google-charts: add new package use-google-charts (3c6f93c)