react-google-charts

  • Version 4.0.0
  • Published
  • 237 kB
  • No dependencies
  • MIT license

Install

npm i react-google-charts
yarn add react-google-charts
pnpm add react-google-charts

Overview

react-google-charts React component

Index

Classes

class Chart

class Chart extends React.Component<ReactGoogleChartProps, ReactGoogleChartState> {}

    property defaultProps

    static defaultProps: Partial<ReactGoogleChartProps>;

      property onError

      onError: () => void;

        property onLoad

        onLoad: (google: GoogleViz) => void;

          property onSuccess

          onSuccess: (google: GoogleViz) => void;

            property state

            state: {
            loadingStatus: 'ready' | 'loading' | 'errored';
            google: GoogleViz | null;
            };

              method componentDidMount

              componentDidMount: () => void;

                method componentWillUnmount

                componentWillUnmount: () => void;

                  method isFullyLoaded

                  isFullyLoaded: (google: GoogleViz) => any;

                    method render

                    render: () => JSX.Element;

                      Interfaces

                      interface ChartWrapperOptions

                      interface ChartWrapperOptions {}

                        property chartType

                        chartType: string;

                          property containerId

                          containerId: string;

                            property dataSourceUrl

                            dataSourceUrl?: string;

                              property dataTable

                              dataTable?: GoogleDataTable;

                                property options

                                options: Partial<{
                                width: number;
                                height: number;
                                is3D: boolean;
                                title: string;
                                backgroundColor: string;
                                hAxis?: {
                                minValue?: any;
                                maxValue?: any;
                                ticks?: GoogleChartTicks;
                                title?: string;
                                viewWindow?: {
                                max?: any;
                                min?: any;
                                };
                                [otherOptionKey: string]: any;
                                };
                                vAxis?: {
                                minValue?: any;
                                maxValue?: any;
                                ticks?: GoogleChartTicks;
                                title?: string;
                                viewWindow?: {
                                max?: any;
                                min?: any;
                                };
                                [otherOptionKey: string]: any;
                                };
                                legend: any;
                                colors: string[];
                                [otherOptionKey: string]: any;
                                }>;

                                  property query

                                  query?: string;

                                    property refreshInterval

                                    refreshInterval?: number;

                                      property view

                                      view: any[] | {};

                                        index signature

                                        [otherOptionKey: string]: any;

                                          interface ChartWrapperProps

                                          interface ChartWrapperProps {}

                                            property chartType

                                            chartType: GoogleChartWrapperChartType;

                                              property children

                                              children?: (props: ChartWrapperProps, chartWrapper: GoogleChartWrapper) => any;

                                                property containerId

                                                containerId?: string;

                                                  property dataSourceUrl

                                                  dataSourceUrl?: string;

                                                    property dataTable

                                                    dataTable?: {};

                                                      property options

                                                      options?: {
                                                      width?: number;
                                                      height?: number;
                                                      is3D?: boolean;
                                                      title?: string;
                                                      backgroundColor: string;
                                                      };

                                                        property query

                                                        query?: string;

                                                          property refreshInterval

                                                          refreshInterval?: number;

                                                            property render

                                                            render?: (props: ChartWrapperProps, chartWrapper: GoogleChartWrapper) => any;

                                                              property view

                                                              view?: any[] | {};

                                                                Enums

                                                                enum GoogleDataTableColumnRoleType

                                                                enum GoogleDataTableColumnRoleType {
                                                                annotation = 'annotation',
                                                                annotationText = 'annotationText',
                                                                certainty = 'certainty',
                                                                emphasis = 'emphasis',
                                                                interval = 'interval',
                                                                scope = 'scope',
                                                                style = 'style',
                                                                tooltip = 'tooltip',
                                                                domain = 'domain',
                                                                }

                                                                  member annotation

                                                                  annotation = 'annotation'

                                                                    member annotationText

                                                                    annotationText = 'annotationText'

                                                                      member certainty

                                                                      certainty = 'certainty'

                                                                        member domain

                                                                        domain = 'domain'

                                                                          member emphasis

                                                                          emphasis = 'emphasis'

                                                                            member interval

                                                                            interval = 'interval'

                                                                              member scope

                                                                              scope = 'scope'

                                                                                member style

                                                                                style = 'style'

                                                                                  member tooltip

                                                                                  tooltip = 'tooltip'

                                                                                    Type Aliases

                                                                                    type GoogleArrayToDataTable

                                                                                    type GoogleArrayToDataTable = (
                                                                                    data: any[][],
                                                                                    isFirstRowLabels?: boolean
                                                                                    ) => GoogleDataTable;

                                                                                      type GoogleChartAction

                                                                                      type GoogleChartAction = {
                                                                                      id: string;
                                                                                      text: string;
                                                                                      action: (chartWrapper: GoogleChartWrapper) => void;
                                                                                      };

                                                                                        type GoogleChartControl

                                                                                        type GoogleChartControl = {
                                                                                        getContainerId: () => string;
                                                                                        getOptions: () => GoogleChartControlOptions;
                                                                                        getState: () => any;
                                                                                        setState: (state: any) => void;
                                                                                        setOptions: (options: GoogleChartControlOptions) => void;
                                                                                        setControlType: (controlType: string) => void;
                                                                                        };

                                                                                          type GoogleChartControlOptions

                                                                                          type GoogleChartControlOptions = any;

                                                                                            type GoogleChartControlProp

                                                                                            type GoogleChartControlProp = {
                                                                                            controlType:
                                                                                            | 'CategoryFilter'
                                                                                            | 'ChartRangeFilter'
                                                                                            | 'DateRangeFilter'
                                                                                            | 'NumberRangeFilter'
                                                                                            | 'StringFilter';
                                                                                            options: {};
                                                                                            controlWrapperParams?: {};
                                                                                            controlID?: string;
                                                                                            controlPosition?: 'top' | 'bottom';
                                                                                            controlEvents?: ReactGoogleChartEvent[];
                                                                                            };

                                                                                              type GoogleChartDashboard

                                                                                              type GoogleChartDashboard = {
                                                                                              draw: (data: GoogleDataTable) => void;
                                                                                              bind: (
                                                                                              controlWrapperOrWrappers: GoogleChartControl | GoogleChartControl[],
                                                                                              chartWrapper: GoogleChartWrapper
                                                                                              ) => void;
                                                                                              };

                                                                                                type GoogleChartEditor

                                                                                                type GoogleChartEditor = {
                                                                                                new (): GoogleChartEditor;
                                                                                                openDialog: (
                                                                                                chartWrapper: GoogleChartWrapper,
                                                                                                chartEditorOptions?: {
                                                                                                dataSourceInput?: any;
                                                                                                [otherKeyMaybe: string]: any;
                                                                                                }
                                                                                                ) => null;
                                                                                                getChartWrapper: () => GoogleChartWrapper;
                                                                                                setChartWrapper: (chartWrapper: GoogleChartWrapper) => GoogleChartWrapper;
                                                                                                closeDialog: () => null;
                                                                                                };

                                                                                                  type GoogleChartLoader

                                                                                                  type GoogleChartLoader = {
                                                                                                  load: (
                                                                                                  version: GoogleChartVersion,
                                                                                                  googleChartOptions: GoogleChartLoaderOptions
                                                                                                  ) => void;
                                                                                                  setOnLoadCallback: (callback: () => void) => void;
                                                                                                  };

                                                                                                    type GoogleChartLoaderOptions

                                                                                                    type GoogleChartLoaderOptions = {
                                                                                                    packages?: GoogleChartPackages[];
                                                                                                    language?: string;
                                                                                                    mapsApiKey?: string;
                                                                                                    };

                                                                                                      type GoogleChartOptions

                                                                                                      type GoogleChartOptions = {
                                                                                                      width?: number;
                                                                                                      height?: number;
                                                                                                      is3D?: boolean;
                                                                                                      backgroundColor: string;
                                                                                                      title?: string;
                                                                                                      hAxis?: {
                                                                                                      minValue?: any;
                                                                                                      maxValue?: any;
                                                                                                      ticks?: GoogleChartTicks;
                                                                                                      title?: string;
                                                                                                      viewWindow?: {
                                                                                                      max?: any;
                                                                                                      min?: any;
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      vAxis?: {
                                                                                                      minValue?: any;
                                                                                                      maxValue?: any;
                                                                                                      ticks?: GoogleChartTicks;
                                                                                                      title?: string;
                                                                                                      viewWindow?: {
                                                                                                      max?: any;
                                                                                                      min?: any;
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      bubble?: {};
                                                                                                      pieHole?: number;
                                                                                                      redFrom?: number;
                                                                                                      redTo?: number;
                                                                                                      yellowFrom?: number;
                                                                                                      yellowTo?: number;
                                                                                                      minorTicks?: number;
                                                                                                      legend?:
                                                                                                      | string
                                                                                                      | {
                                                                                                      position?: string;
                                                                                                      maxLines?: number;
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      curveType?: string;
                                                                                                      showTooltip?: boolean;
                                                                                                      showInfoWindow?: boolean;
                                                                                                      allowHtml?: boolean;
                                                                                                      isStacked?: string | boolean;
                                                                                                      minColor?: string;
                                                                                                      midColor?: string;
                                                                                                      maxColor?: string;
                                                                                                      headerHeight?: number;
                                                                                                      fontColor?: string;
                                                                                                      showScale?: boolean;
                                                                                                      bar?: {
                                                                                                      groupWidth?: string;
                                                                                                      };
                                                                                                      candlestick?: {
                                                                                                      fallingColor?: {
                                                                                                      strokeWidth?: number;
                                                                                                      fill?: string;
                                                                                                      };
                                                                                                      risingColor?: {
                                                                                                      strokeWidth?: number;
                                                                                                      fill?: string;
                                                                                                      };
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      wordtree?: {
                                                                                                      format?: string;
                                                                                                      word?: string;
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };
                                                                                                      [otherOptionKey: string]: any;
                                                                                                      };

                                                                                                        type GoogleChartPackages

                                                                                                        type GoogleChartPackages =
                                                                                                        | 'corechart'
                                                                                                        | 'charteditor'
                                                                                                        | 'controls'
                                                                                                        | 'calendar'
                                                                                                        | 'gantt'
                                                                                                        | 'gauge'
                                                                                                        | 'geochart'
                                                                                                        | 'map'
                                                                                                        | 'orgchart'
                                                                                                        | 'sankey'
                                                                                                        | 'table'
                                                                                                        | 'timeline'
                                                                                                        | 'treemap'
                                                                                                        | 'wordtree';

                                                                                                          type GoogleChartTicks

                                                                                                          type GoogleChartTicks = (number | Date)[];

                                                                                                            type GoogleChartToolbarItem

                                                                                                            type GoogleChartToolbarItem = {
                                                                                                            type: 'igoogle' | 'html' | 'csv' | 'htmlcode';
                                                                                                            datasource: string;
                                                                                                            gadget?: string;
                                                                                                            userPrefs?: {
                                                                                                            '3d': number;
                                                                                                            [otherKeyMaybe: string]: any;
                                                                                                            };
                                                                                                            };

                                                                                                              type GoogleChartVersion

                                                                                                              type GoogleChartVersion = 'current' | 'upcoming';

                                                                                                                type GoogleChartWrapper

                                                                                                                type GoogleChartWrapper = {
                                                                                                                new (chartWrapperOptions: Partial<ChartWrapperOptions>): GoogleChartWrapper;
                                                                                                                draw: (chartArgs?: ChartWrapperProps) => any;
                                                                                                                toJSON: () => string;
                                                                                                                clone: () => GoogleChartWrapper;
                                                                                                                getDataSourceUrl: () => string;
                                                                                                                getDataTable: () => GoogleDataTable | null;
                                                                                                                getChartType: () => GoogleChartWrapperChartType;
                                                                                                                getChartName: () => string;
                                                                                                                getChart: () => {
                                                                                                                removeAction: (actionID: string) => void;
                                                                                                                getSelection: () => {
                                                                                                                row?: any;
                                                                                                                column?: any;
                                                                                                                }[];
                                                                                                                setAction: (ChartAction: GoogleChartAction) => void;
                                                                                                                getImageURI: () => void;
                                                                                                                clearChart: () => void;
                                                                                                                };
                                                                                                                getContainerId: () => string;
                                                                                                                getQuery: () => string;
                                                                                                                getRefreshInterval: () => number;
                                                                                                                getOption: (key: string, opt_default_value?: any) => any;
                                                                                                                getOptions: () => {};
                                                                                                                getSelection: () => {
                                                                                                                row?: any;
                                                                                                                column?: any;
                                                                                                                }[];
                                                                                                                getView: () => {} | any[];
                                                                                                                setDataSourceUrl: (url: string) => void;
                                                                                                                setDataTable: (table: any) => void;
                                                                                                                setChartType: (chartType: GoogleChartWrapperChartType) => void;
                                                                                                                setChartName: (name: string) => void;
                                                                                                                setContainerId: (id: string) => void;
                                                                                                                setQuery: (query_string: string) => void;
                                                                                                                setRefreshInterval: (interval: number) => void;
                                                                                                                setOption: (key: string, value: any) => void;
                                                                                                                setOptions: (options_obj: Partial<ChartWrapperOptions['options']>) => void;
                                                                                                                };

                                                                                                                  type GoogleChartWrapperChartType

                                                                                                                  type GoogleChartWrapperChartType =
                                                                                                                  | 'AnnotationChart'
                                                                                                                  | 'AreaChart'
                                                                                                                  | 'BarChart'
                                                                                                                  | 'BubbleChart'
                                                                                                                  | 'Calendar'
                                                                                                                  | 'CandlestickChart'
                                                                                                                  | 'ColumnChart'
                                                                                                                  | 'ComboChart'
                                                                                                                  | 'DiffChart'
                                                                                                                  | 'DonutChart'
                                                                                                                  | 'Gantt'
                                                                                                                  | 'Gauge'
                                                                                                                  | 'GeoChart'
                                                                                                                  | 'Histogram'
                                                                                                                  | 'LineChart'
                                                                                                                  | 'Line'
                                                                                                                  | 'Bar'
                                                                                                                  | 'Map'
                                                                                                                  | 'OrgChart'
                                                                                                                  | 'PieChart'
                                                                                                                  | 'Sankey'
                                                                                                                  | 'ScatterChart'
                                                                                                                  | 'Scatter'
                                                                                                                  | 'SteppedAreaChart'
                                                                                                                  | 'Table'
                                                                                                                  | 'Timeline'
                                                                                                                  | 'TreeMap'
                                                                                                                  | 'WaterfallChart'
                                                                                                                  | 'WordTree';

                                                                                                                    type GoogleDataTable

                                                                                                                    type GoogleDataTable = {
                                                                                                                    new (dataParam: any): GoogleDataTable;
                                                                                                                    addColumn: (column: GoogleDataTableColumn) => number;
                                                                                                                    addRow: (row?: GoogleDataTableRow) => number;
                                                                                                                    addRows: (rows?: GoogleDataTableRow[] | number[] | any[]) => number;
                                                                                                                    clone: () => GoogleDataTable;
                                                                                                                    getColumnId: (columnIndex: number) => string;
                                                                                                                    getColumnLabel: (columnIndex: number) => string;
                                                                                                                    getColumnPattern: (columnIndex: number) => string;
                                                                                                                    getColumnProperties: (columnIndex: number) => {};
                                                                                                                    getColumnProperty: (columnIndex: number, name: string) => any;
                                                                                                                    getColumnRange: (columnIndex: number) => {
                                                                                                                    min: number | null;
                                                                                                                    max: number | null;
                                                                                                                    };
                                                                                                                    getColumnRole: (columnIndex: number) => GoogleDataTableColumnRoleType;
                                                                                                                    getColumnType: (columnIndex: number) => GoogleDataTableColumnType;
                                                                                                                    getDistinctValues: (columnIndex: number) => any[];
                                                                                                                    getFilteredRows: (filters: GoogleDataTableRowFilter[]) => number[];
                                                                                                                    getFormattedValue: (rowIndex: number, columnIndex: number) => string;
                                                                                                                    getNumberOfColumns: () => number;
                                                                                                                    getNumberOfRows: () => number;
                                                                                                                    getProperties: (rowIndex: number, columnIndex: number) => {};
                                                                                                                    getProperty: (rowIndex: number, columnIndex: number, name: string) => any;
                                                                                                                    getRowProperties: (rowIndex: number) => {};
                                                                                                                    getRowProperty: (rowIndex: number, name: string) => any;
                                                                                                                    getSortedRows: (sortColumns: GoogleDataTableSortColumns) => number[];
                                                                                                                    getTableProperties: () => {};
                                                                                                                    getTableProperty: (name: string) => any;
                                                                                                                    getValue: (
                                                                                                                    rowIndex: number,
                                                                                                                    columnIndex: number
                                                                                                                    ) => boolean | string | number | Date | number[] | null;
                                                                                                                    insertColumn: (
                                                                                                                    columnIndex: number,
                                                                                                                    type: GoogleDataTableColumnType,
                                                                                                                    label?: string,
                                                                                                                    id?: string
                                                                                                                    ) => void;
                                                                                                                    insertRows: (
                                                                                                                    rowIndex: number,
                                                                                                                    numberOrArray: GoogleDataTableRow[] | number
                                                                                                                    ) => void;
                                                                                                                    removeColumn: (columnIndex: number) => void;
                                                                                                                    removeColumns: (columnIndex: number, numberOfColumns: number) => void;
                                                                                                                    removeRow: (rowIndex: number) => void;
                                                                                                                    removeRows: (rowIndex: number, numberOfColumns: number) => void;
                                                                                                                    setCell: (
                                                                                                                    rowIndex: number,
                                                                                                                    columnIndex: number,
                                                                                                                    value?: any,
                                                                                                                    formattedValue?: string,
                                                                                                                    properties?: {}
                                                                                                                    ) => {};
                                                                                                                    setColumnLabel: (columnIndex: number, label: string) => void;
                                                                                                                    setColumnProperty: (columnIndex: number, name: string, value: any) => void;
                                                                                                                    setColumnProperties: (columnIndex: number, properties: {} | null) => void;
                                                                                                                    setFormattedValue: (
                                                                                                                    rowIndex: number,
                                                                                                                    columnIndex: number,
                                                                                                                    formattedValue: string
                                                                                                                    ) => void;
                                                                                                                    setProperty: (
                                                                                                                    rowIndex: number,
                                                                                                                    columnIndex: number,
                                                                                                                    name: string,
                                                                                                                    value: any
                                                                                                                    ) => void;
                                                                                                                    setProperties: (
                                                                                                                    rowIndex: number,
                                                                                                                    columnIndex: number,
                                                                                                                    properties: {} | null
                                                                                                                    ) => void;
                                                                                                                    setRowProperty: (rowIndex: number, name: string, value: any) => void;
                                                                                                                    setRowProperties: (rowIndex: number, properties: {} | null) => void;
                                                                                                                    setTableProperties: (properties: {} | null) => void;
                                                                                                                    setValue: (rowIndex: number, columnIndex: number, value: string) => void;
                                                                                                                    sort: (sortColumns: GoogleDataTableSortColumns) => void;
                                                                                                                    toJSON: () => string;
                                                                                                                    };

                                                                                                                      type GoogleDataTableCell

                                                                                                                      type GoogleDataTableCell =
                                                                                                                      | {
                                                                                                                      v?: any;
                                                                                                                      f?: string;
                                                                                                                      p?: {};
                                                                                                                      }
                                                                                                                      | string
                                                                                                                      | number
                                                                                                                      | boolean
                                                                                                                      | Date;

                                                                                                                        type GoogleDataTableColumn

                                                                                                                        type GoogleDataTableColumn =
                                                                                                                        | {
                                                                                                                        type: GoogleDataTableColumnType;
                                                                                                                        label?: string;
                                                                                                                        role?: GoogleDataTableColumnRoleType;
                                                                                                                        pattern?: string;
                                                                                                                        p?: {};
                                                                                                                        id?: string;
                                                                                                                        }
                                                                                                                        | string;

                                                                                                                          type GoogleDataTableColumnType

                                                                                                                          type GoogleDataTableColumnType =
                                                                                                                          | 'string'
                                                                                                                          | 'number'
                                                                                                                          | 'boolean'
                                                                                                                          | 'date'
                                                                                                                          | 'datetime'
                                                                                                                          | 'timeofday';

                                                                                                                            type GoogleDataTableJS

                                                                                                                            type GoogleDataTableJS = {
                                                                                                                            cols: GoogleDataTableColumn[];
                                                                                                                            rows: {
                                                                                                                            c: GoogleDataTableRow;
                                                                                                                            }[];
                                                                                                                            p?: {};
                                                                                                                            };

                                                                                                                              type GoogleDataTableRow

                                                                                                                              type GoogleDataTableRow = GoogleDataTableCell[];

                                                                                                                                type GoogleDataTableRowFilter

                                                                                                                                type GoogleDataTableRowFilter = {
                                                                                                                                column: number;
                                                                                                                                value: any;
                                                                                                                                minValue?: any;
                                                                                                                                maxValue?: any;
                                                                                                                                };

                                                                                                                                  type GoogleDataTableSortColumns

                                                                                                                                  type GoogleDataTableSortColumns =
                                                                                                                                  | number
                                                                                                                                  | {
                                                                                                                                  column: number;
                                                                                                                                  desc: boolean;
                                                                                                                                  }
                                                                                                                                  | number[]
                                                                                                                                  | {
                                                                                                                                  column: number;
                                                                                                                                  desc: boolean;
                                                                                                                                  }[];

                                                                                                                                    type GoogleViz

                                                                                                                                    type GoogleViz = {
                                                                                                                                    charts: GoogleChartLoader;
                                                                                                                                    visualization: {
                                                                                                                                    ChartWrapper: GoogleChartWrapper;
                                                                                                                                    ChartEditor: GoogleChartEditor;
                                                                                                                                    DataTable: GoogleDataTable;
                                                                                                                                    events: GoogleVizEvents;
                                                                                                                                    arrayToDataTable: GoogleArrayToDataTable;
                                                                                                                                    drawToolbar: GoogleVizDrawToolbar;
                                                                                                                                    [otherKeys: string]: any;
                                                                                                                                    };
                                                                                                                                    };

                                                                                                                                      type GoogleVizDrawToolbar

                                                                                                                                      type GoogleVizDrawToolbar = (
                                                                                                                                      toolbarContainer: HTMLDivElement,
                                                                                                                                      components: GoogleChartToolbarItem[]
                                                                                                                                      ) => any;

                                                                                                                                        type GoogleVizEventName

                                                                                                                                        type GoogleVizEventName =
                                                                                                                                        | 'ready'
                                                                                                                                        | 'error'
                                                                                                                                        | 'select'
                                                                                                                                        | 'animationfinish'
                                                                                                                                        | 'statechange'
                                                                                                                                        | 'ok'
                                                                                                                                        | 'cancel'
                                                                                                                                        | 'animationstart';

                                                                                                                                          type GoogleVizEvents

                                                                                                                                          type GoogleVizEvents = {
                                                                                                                                          addListener: (
                                                                                                                                          chartWrapper: GoogleChartWrapper | GoogleChartControl | GoogleChartEditor,
                                                                                                                                          name: GoogleVizEventName,
                                                                                                                                          onEvent: (chartWrapper: GoogleChartWrapper) => any
                                                                                                                                          ) => any;
                                                                                                                                          removeListener: (
                                                                                                                                          chartWrapper: GoogleChartWrapper,
                                                                                                                                          name: GoogleVizEventName,
                                                                                                                                          callback: Function
                                                                                                                                          ) => any;
                                                                                                                                          removeAllListeners: (chartWrapper: GoogleChartWrapper) => any;
                                                                                                                                          };

                                                                                                                                            type ReactGoogleChartContext

                                                                                                                                            type ReactGoogleChartContext = {
                                                                                                                                            data: ReactGoogleChartProps['data'];
                                                                                                                                            rows: ReactGoogleChartProps['rows'] | null;
                                                                                                                                            columns: ReactGoogleChartProps['columns'] | null;
                                                                                                                                            diffdata: ReactGoogleChartProps['diffdata'] | null;
                                                                                                                                            options: ReactGoogleChartProps['options'] | null;
                                                                                                                                            legend_toggle: ReactGoogleChartProps['legend_toggle'] | null;
                                                                                                                                            legendToggle: ReactGoogleChartProps['legendToggle'] | null;
                                                                                                                                            chartType: ReactGoogleChartProps['chartType'] | null;
                                                                                                                                            formatters: ReactGoogleChartProps['formatters'] | null;
                                                                                                                                            spreadSheetUrl: ReactGoogleChartProps['spreadSheetUrl'] | null;
                                                                                                                                            spreadSheetQueryParameters:
                                                                                                                                            | ReactGoogleChartProps['spreadSheetQueryParameters']
                                                                                                                                            | null;
                                                                                                                                            };

                                                                                                                                              type ReactGoogleChartDashboardRender

                                                                                                                                              type ReactGoogleChartDashboardRender = ({
                                                                                                                                              renderControl,
                                                                                                                                              renderChart,
                                                                                                                                              renderToolbar,
                                                                                                                                              }: {
                                                                                                                                              renderControl: (
                                                                                                                                              filter: ({
                                                                                                                                              control,
                                                                                                                                              controlProp,
                                                                                                                                              }: {
                                                                                                                                              control: GoogleChartControl;
                                                                                                                                              controlProp: GoogleChartControlProp;
                                                                                                                                              }) => boolean
                                                                                                                                              ) => any;
                                                                                                                                              renderChart: () => any;
                                                                                                                                              renderToolbar: () => any;
                                                                                                                                              }) => any;

                                                                                                                                                type ReactGoogleChartEvent

                                                                                                                                                type ReactGoogleChartEvent = {
                                                                                                                                                eventName: GoogleVizEventName;
                                                                                                                                                callback: (eventCallbackArgs: {
                                                                                                                                                chartWrapper: GoogleChartWrapper;
                                                                                                                                                controlWrapper?: GoogleChartControl;
                                                                                                                                                props: ReactGoogleChartProps;
                                                                                                                                                google: GoogleViz;
                                                                                                                                                eventArgs: any;
                                                                                                                                                }) => void;
                                                                                                                                                };

                                                                                                                                                  type ReactGoogleChartProps

                                                                                                                                                  type ReactGoogleChartProps = {
                                                                                                                                                  height?: string | number;
                                                                                                                                                  width?: string | number;
                                                                                                                                                  graphID?: string;
                                                                                                                                                  chartType: GoogleChartWrapperChartType;
                                                                                                                                                  diffdata?: {
                                                                                                                                                  old: any;
                                                                                                                                                  new: any;
                                                                                                                                                  };
                                                                                                                                                  options?: ChartWrapperOptions['options'];
                                                                                                                                                  loader?: JSX.Element;
                                                                                                                                                  errorElement?: JSX.Element;
                                                                                                                                                  data?: any[] | {};
                                                                                                                                                  rows?: GoogleDataTableRow[];
                                                                                                                                                  columns?: GoogleDataTableColumn[];
                                                                                                                                                  chartActions?: GoogleChartAction[];
                                                                                                                                                  chartEvents?: ReactGoogleChartEvent[];
                                                                                                                                                  chartVersion?: GoogleChartVersion;
                                                                                                                                                  chartPackages?: GoogleChartPackages[];
                                                                                                                                                  chartLanguage?: string;
                                                                                                                                                  mapsApiKey?: string;
                                                                                                                                                  graph_id?: string;
                                                                                                                                                  legendToggle?: boolean;
                                                                                                                                                  legend_toggle?: boolean;
                                                                                                                                                  onLoad?: (google: GoogleViz) => void;
                                                                                                                                                  getChartWrapper?: (chartWrapper: GoogleChartWrapper, google: GoogleViz) => void;
                                                                                                                                                  getChartEditor?: (args: {
                                                                                                                                                  chartEditor: GoogleChartEditor;
                                                                                                                                                  chartWrapper: GoogleChartWrapper;
                                                                                                                                                  google: GoogleViz;
                                                                                                                                                  }) => void;
                                                                                                                                                  className?: string;
                                                                                                                                                  style?: React.CSSProperties;
                                                                                                                                                  formatters?: {
                                                                                                                                                  column: number | number[];
                                                                                                                                                  type:
                                                                                                                                                  | 'ArrowFormat'
                                                                                                                                                  | 'BarFormat'
                                                                                                                                                  | 'ColorFormat'
                                                                                                                                                  | 'DateFormat'
                                                                                                                                                  | 'NumberFormat'
                                                                                                                                                  | 'PatternFormat';
                                                                                                                                                  options?: {};
                                                                                                                                                  }[];
                                                                                                                                                  spreadSheetUrl?: string;
                                                                                                                                                  spreadSheetQueryParameters?: {
                                                                                                                                                  headers: number;
                                                                                                                                                  gid?: number | string;
                                                                                                                                                  sheet?: string;
                                                                                                                                                  query?: string;
                                                                                                                                                  access_token?: string;
                                                                                                                                                  };
                                                                                                                                                  rootProps?: any;
                                                                                                                                                  controls?: GoogleChartControlProp[];
                                                                                                                                                  render?: ReactGoogleChartDashboardRender;
                                                                                                                                                  toolbarItems?: GoogleChartToolbarItem[];
                                                                                                                                                  toolbarID?: string;
                                                                                                                                                  chartWrapperParams?: any;
                                                                                                                                                  };

                                                                                                                                                    type ReactGoogleChartState

                                                                                                                                                    type ReactGoogleChartState = {
                                                                                                                                                    loadingStatus: 'loading' | 'errored' | 'ready';
                                                                                                                                                    google: null | GoogleViz;
                                                                                                                                                    };

                                                                                                                                                      type VizEventsProps

                                                                                                                                                      type VizEventsProps = {
                                                                                                                                                      chartWrapper: GoogleChartWrapper;
                                                                                                                                                      onReady?: (chartWrapper: GoogleChartWrapper) => any;
                                                                                                                                                      onError?: (chartWrapper: GoogleChartWrapper) => any;
                                                                                                                                                      onSelect?: (
                                                                                                                                                      selection: Array<{
                                                                                                                                                      row?: any;
                                                                                                                                                      column?: any;
                                                                                                                                                      }>
                                                                                                                                                      ) => any;
                                                                                                                                                      render?: (props: VizEventsProps, chartWrapper: GoogleChartWrapper) => any;
                                                                                                                                                      children?: (props: VizEventsProps, chartWrapper: GoogleChartWrapper) => any;
                                                                                                                                                      };

                                                                                                                                                        type WindowWithMaybeGoogle

                                                                                                                                                        type WindowWithMaybeGoogle = Window & {
                                                                                                                                                        google?: any;
                                                                                                                                                        };

                                                                                                                                                          Package Files (3)

                                                                                                                                                          Dependencies (0)

                                                                                                                                                          No dependencies.

                                                                                                                                                          Dev Dependencies (0)

                                                                                                                                                          No dev dependencies.

                                                                                                                                                          Peer Dependencies (2)

                                                                                                                                                          Badge

                                                                                                                                                          To add a badge like this onejsDocs.io badgeto your package's README, use the codes available below.

                                                                                                                                                          You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/react-google-charts.

                                                                                                                                                          • Markdown
                                                                                                                                                            [![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/react-google-charts)
                                                                                                                                                          • HTML
                                                                                                                                                            <a href="https://www.jsdocs.io/package/react-google-charts"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>