Questions tagged [react-google-charts]

A thin, typed, React wrapper for Google Charts.

Website (+demos)

https://react-google-charts.com/

npm

https://www.npmjs.com/package/react-google-charts

Usage

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"));

Screenshot

screenshot

168 questions
1
vote
0 answers

How to plot vertical base line to show current time using react-google-charts for chart type Timeline chart

//https://www.react-google-charts.com/examples/timeline import { Chart } from "react-google-charts"; export function GoogleTimeLineChart(props){ const data…
1
vote
1 answer

Google react chart bar chart options customizing tooltip

I am trying to change the size of the tooltip in my bar chart using the options parameter. However nothing I do affects the tooltip. It seems like the Bar chart has some limitations, although I can't confirm from the documentation or Examples…
1
vote
1 answer

How can I push my react form data to a dynamic API query in another component

this is my first StackOverflow question: So I have a form called datepicker, and the idea is that a user can put in a date in YYYY-MM-DD format. Upon the submission of the entry in the field (onSubmit handler), the user is to be redirected to a…
1
vote
1 answer

AJax issue while loading google chart in react

I am trying to use Google chart in React. I read the data from the database and use hook(useState) to save the data. But I can't load the google chart when I fetch the data. I guess it is Ajax problem. I have tried to copy the data that I read from…
1
vote
1 answer

Uncaught TypeError: google.visualization.TreeMap is not a constructor

Hi i am facing this error while running with the react-google-charts while using the react-google-charts, any help would be helpful. // Instantiate and draw our chart, passing in some options. const tree = new…
1
vote
1 answer

How can I getSelection value on the TreeMap in reactjs react-google-charts

i want to get the value for the node which is selected by the user in graph. I have tried with this solution but not getting the values. const ChartEvents = [ { eventName: "select",callback({ chartWrapper }) {console.log("Selected ",…
1
vote
1 answer

Using chartEvents on google-react-charts and typescript

I am having a react typescript project in which i am using react-google-charts. Based on reading a similar discussion here which works for JS, I am trying the same on Typescript. I am having the below chart :
1
vote
1 answer

react-google-charts for dual-Y stacked bar charts

I am trying to build the below bar chart. My data are in the format : [ month , region , totalSalesForCompanyA, totalSalesForCompanyB ] I can successfully build the below charts : a bar chart for dual-Y where on the X-axis I have months, and then…
1
vote
0 answers

Include pie chart and sankey diagram in Google Charts dashboard

I'm trying to combine two charts and a filter, specifically a Pie Chart and Sankey Diagram with no success. There is a similar answered question, but the difference with my problem is that I am embedding my charts inside a dashboard so I can use the…
1
vote
0 answers

React: react-google-charts timeline: displaying two different formats on the same axis

Right now I'm trying to update an hourly timeline chart to use the following horizontal axis format: For the tick at the left side of the chart, or for any ticks where the date changes, use the format "EE HH:mm" (display day and time) Otherwise,…
urgentio
  • 11
  • 2
1
vote
1 answer

Create Pie Chart Using JSON Data React

I have one Array that consist of one Key called Status it has two value 1 is good and other is bad i am using react-google-charts i upload my code below kindly check and help me JSON: [ { Status: 'Good' }, { Status:…
Karthikeyan M
  • 106
  • 1
  • 12
1
vote
0 answers

Dual Axis Stacked Column Chart

I'm trying to create a dual axis stacked column Chart using Google's Classic Charts. just like the Google's Material charts. but there seems in classic one, the new stacks gets render over the previous one. check the code below: Switch in between…
1
vote
1 answer

Unable to display Google Charts timeline on all devices

I'm using react-google-charts to create a Timeline. It works for me on my Macbook but not on iPad or iPhone with Chrome. It doesn't work in Safari or Firefox on the Macbook. This is the error message I get: undefined is not an object (evaluating…
smabbett
  • 21
  • 4
1
vote
0 answers

How to customize X-axis in react google chart

I was trying to limit the horizontal axis to only two points ( minimum and maximum ). I have tried using tick property for haxis but it seems to be not working for me. here is the code snippet I have tried. Please help const chartoptions = { …
1
vote
1 answer

How to find google charts (Sankey) select events selection data - including tooltip column

I am creating a Sankey chart via react-google-charts. Each time when clicked on the link between the nodes I am printing the data which has been working fine until recently. Assume my Sankey diagram to be like this and I clicked on the link between…
Imran
  • 67
  • 6