Not a Propaganda Machine

    @ennabl/react-google-charts
    TypeScript icon, indicating that this package has built-in type declarations

    3.0.15-3 • Public • Published

    React Google Charts

    CircleCI NPM NPM NPM BundlePhobia

    A thin, typed, React wrapper for Google Charts.

    Docs and examples.

    Installation

    With your favorite package manager (yarn, pnpm or npm) :

    yarn add react-google-charts
    # or
    npm i -s react-google-charts

    Note : If you're using react < 16.3 then use 2.x version:

    yarn add react-google-charts@2

    Quick Start

    import * as React from "react";
    import { render } from "react-dom";
    import { Chart } from "react-google-charts";
    
    export default class App extends React.Component {
      render() {
        return (
          <div className={"my-pretty-chart-container"}>
            <Chart
              chartType="ScatterChart"
              data={[["Age", "Weight"], [4, 5.5], [8, 12]]}
              width="100%"
              height="400px"
              legendToggle
            />
          </div>
        );
      }
    }
    render(<App />, document.querySelector("#app"));

    Quick Walkthrough

    Initialize from data array

    import { Chart } from "react-google-charts";
    import * as React from "react";
    import { render } from "react-dom";
    
    const options = {
      title: "Age vs. Weight comparison",
      hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
      vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
      legend: "none"
    };
    const data = [
      ["Age", "Weight"],
      [8, 12],
      [4, 5.5],
      [11, 14],
      [4, 5],
      [3, 3.5],
      [6.5, 7]
    ];
    
    const ExampleChart = () => {
      return (
        <Chart
          chartType="ScatterChart"
          data={data}
          options={options}
          width="80%"
          height="400px"
          legendToggle
        />
      );
    };
    
    render(<ExampleChart />, document.getElementByID("app"));

    Initialize using rows and columns

    import * as React from "react";
    import { Chart } from "react-google-charts";
    
    const ExampleChart = () => {
      return (
        <Chart
          chartType="ScatterChart"
          rows={[[8, 12], [4, 5.5], [11, 14], [4, 5], [3, 3.5], [6.5, 7]]}
          columns={[
            {
              type: "number",
              label: "Age"
            },
            {
              type: "number",
              label: "Weight"
            }
          ]}
          options={
            // Chart options
            {
              title: "Age vs. Weight comparison",
              hAxis: {
                title: "Age",
                viewWindow: { min: 0, max: 15 }
              },
              vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
              legend: "none"
            }
          }
          width={"100%"}
          height={"400px"}
          legendToggle
        />
      );
    };
    export default ExampleChart;

    Listen to chart events

    Set the chart-specific events you want to listen to and the corresponding callback. The callback has the component as an argument.

    import * as React from "react";
    import { Chart } from "react-google-charts";
    
    const chartEvents = [
      {
        eventName: "select",
        callback({ chartWrapper }) {
          console.log("Selected ", chartWrapper.getChart().getSelection());
        }
      }
    ];
    const data = [
      ["age", "weight"],
      [8, 12],
      [4, 5.5],
      [11, 14],
      [4, 5],
      [3, 3.5],
      [6.5, 7]
    ];
    
    const options = {
      title: "Age vs. Weight comparison",
      hAxis: { title: "Age", viewWindow: { min: 0, max: 15 } },
      vAxis: { title: "Weight", viewWindow: { min: 0, max: 15 } },
      legend: "none"
    };
    const ExampleChart = () => {
      return (
        <Chart
          chartType="ScatterChart"
          data={data}
          options={options}
          graphID="ScatterChart"
          width="100%"
          height="400px"
          chartEvents={chartEvents}
        />
      );
    };
    
    export default ExampleChart;

    Examples

    Load Data

    Load Data From SpreadSheet

    Charts

    Area Chart

    Bar Chart

    Bubble Chart

    Calendar Chart

    Candlestick Chart

    Column Chart

    Diff Scatter Chart

    Diff Column Chart

    Donut Chart

    Gantt Chart

    Gauge Chart

    Geo Chart

    Histogram Chart

    Line Chart

    Material Bar Chart

    Material Line Chart

    Org Chart

    Pie Chart

    Sankey Chart

    Scatter Chart

    Stepped Area Chart

    Table Chart

    Timeline Chart

    Treemap Chart

    Waterfall Chart

    Wordtree Chart

    Run the Storybook

    git clone https://www.github.com/rakannimer/react-google-charts
    cd react-google-charts
    yarn
    yarn start:storybook

    Contributing

    Contributions are very welcome. Check out CONTRIBUTING.md

    Install

    npm i @ennabl/react-google-charts

    DownloadsWeekly Downloads

    1

    Version

    3.0.15-3

    License

    MIT

    Unpacked Size

    327 kB

    Total Files

    28

    Last publish

    Collaborators

    • newsiberian
    • ennabl-admin