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
0
votes
1 answer

GeoChart in Vue throwing error : chartsLib.visualization[this.type] is not a constructor

I have been working on a simple single-page-app that displays data on a world map using GeoChart. Everything was working fine and I was able to view the map for almost 3 months of working on the app until all of a sudden my map stopped showing up…
0
votes
0 answers

How to use react-google-charts into Vuejs?

I used react-google-charts for Reactjs, then I wanted to use it for Vuejs, but because I didn't know how to transfer react-google-charts to Vuejs. Has anyone used it, show me how to solve it. Thanks!
0
votes
1 answer

Using dynamic data for google charts

I am creating a my googlecharts in react like so: Loading Data...
} data={[ …
Sky Lurk
  • 417
  • 1
  • 3
  • 13
0
votes
1 answer

Google Chart Component is being re-rendered in the screen- react js

I'm trying to create a GOOGLE CHART (PIE) with data coming from an API, however each time I set the date range it's reloading last (chart component) render + new one, so I'd like to know how to fix the code in order to avoid it's happen and just…
0
votes
0 answers

How to update the locale for react-google-charts dynamically?

I am working on scenario that when user update the locale, then I need to update the React google charts locale. I have created the state of "language" and on click I am calling the function changeLanguage() to update the locale. However it is not…
0
votes
1 answer

Google chart Download and save PNG file

Here's my google pie chart. Right now, I can right click and save image as PNG. However I need the image download to happen automatically on a specified folder when the page loads. I tried various canvas options however couldn't get anything to…
Aqua267
  • 873
  • 3
  • 12
  • 35
0
votes
0 answers

Google Line Chart working in Microsoft edge but not on Google Chrome

I'm charting 2 graphs using Google Chart, the pie chart works fine on both platforms, but the lines aren't displaying in Google Chrome for Line Chart. I'm not too sure if it's due to something I'm missing when I'm drawing the chart or is it due to…
EvT
  • 66
  • 5
0
votes
1 answer

How do I change language in React Google Charts?

I need to change the language/locale for my Google Charts dashboard. I'm using the package react-google-charts for this project. There is a language parameter in its distribution file: windowGoogleCharts.charts.load(version || "current", { …
Caio Mar
  • 2,344
  • 5
  • 31
  • 37
0
votes
0 answers

Google charts : customize range selector design

Is there any way to customize range selector design in google charts. Please see below. Existing: Required:
0
votes
1 answer

How to get data event click in angular google chart-angular 2+

I used the google charts in my angular project dashboard. By reading the document: https://github.com/FERNman/angular-google-charts , I used the below code for getting the event(which should contain the elements of the chart which I selected) As…
Angel Reji
  • 533
  • 2
  • 11
  • 26
0
votes
1 answer

react google charts - Line chart styling

I'm trying to increase the line thickness of my Line Chart implemented using react-google-charts. I have went through the documentation but anything related to line thickness did not work. How do i increase the line thickness and give separate…
CraZyDroiD
  • 6,622
  • 30
  • 95
  • 182
0
votes
1 answer

Need to select the range of points in react google scatter chart by dragging the mouse

Following this question, I have been trying to make the accepted answer by @whitehat work with react-google-charts scatterplot. I managed to create the rectangle, but the dragging works very slow, which I believe is due to re-rendering on each…
Shakedk
  • 420
  • 6
  • 15
0
votes
1 answer

How does google-visualization-tooltip calculate the left and top values?

How does google-visualization-tooltip calculate the left and top values for style ? example - on debugging i can see that :-
How can i…
N29
  • 141
  • 1
  • 17
0
votes
0 answers

Problem in generating bar graph from google chart from database extracted values?

My database table (test_12) is as follows: S.I A B C X Y SBI234 2.280130800000 2.339592225000 2.237112614000 2.296371308000 2.295634019000 SBI316 …
-1
votes
1 answer

How to adjust Google Charts (WordTree) to take data source from Google sheets URL?

I want to get WordTree created from Google sheets URL as a data source The wordTree chart is at: https://developers.google.com/chart/interactive/docs/gallery/wordtree and changing Datasource can be…
1 2 3
11
12