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