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

Modify data in React Google Chart

i'm learning react and i getted API data but i don't know how can i display in React Google Charts. The format to show in React Google Charts is like this: ['Germany', 200,0], ['United States', 300,0], ['Brazil', 400,0], ['Canada',…
ZeR0ByTe
  • 53
  • 1
  • 11
1
vote
1 answer

REACT: How to build a half donut

I'm newbie with react-google-charts and I'm developing a half pie donut but despite of having made it, I've got a problem and this problem is that summatory of % of visible half pie is only 50% because the other 50% is hiddend. How can I make that…
José Carlos
  • 2,850
  • 12
  • 59
  • 95
1
vote
1 answer

How to make Google Calendar chart Mobile responsive?

I am trying to plot top 50 days in the google calendar chart. But when it comes to smaller screens like mobile some of the months are chopped off. I cannot reduce my cell width as well. It will impact the view on bigger screens. Here is my…
Moriartyalex
  • 64
  • 1
  • 5
1
vote
1 answer

Google chart range selector chart type as column chart

In the example I added a column chart with range selector. I changed the chartType of range selector to ColumnChart. But its not changing to column chart. can some one help on this. Also is there is any way to customize the design of the range…
1
vote
1 answer

React Google Pie Chart Styling the Title

I am trying to use google react pie chart however I am having a hard time position the title. Here is my code: const pieOptions = { title: 'my awesome chart', pieHole: 0.6, slices: [ { color: '#00a3e0', }, …
sens_vk
  • 171
  • 2
  • 13
1
vote
1 answer

Remove Y Axis and its grid lines

Im using react-google-charts This is my chart code Loading Chart
} data={[ ["", "Credit", "Debit"], [ "AVERAGE", avg_credit, avg_debit, ], [ "30 Days", …
Omar Hussein
  • 1,057
  • 2
  • 13
  • 31
0
votes
0 answers

react-google-charts.com is that posible to add tootip on legend?

Title:react-google-charts.com is that posible to add tootip on legend ? Title:react-google-charts.com is that posible to add tootip on legend ? utl: https://www.react-google-charts.com/ code: import React from "react"; import { Chart } from…
0
votes
0 answers

React Google Gantt Chart not changing styles

I am working on a react component that utilizes a react-google-chart in the Gantt format. The Chart is the one shown below. Loading Chart
} …
0
votes
0 answers

Reactjs: control tooltip values options by react-google-chart library

I have a project and in this project I have a chart And use the following library: react-google-charts The problem is that when i hover on any point, the Tooltip appears. Tooltip is contains two lines, the first x and the second y The problem is…
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34
0
votes
0 answers

How to get label name onclick from a React google 3D pie chart?

I am trying to get clicked section label name of the 3D Pie Chart Google // but I got null…
Yuvaraj M
  • 171
  • 1
  • 1
  • 6
0
votes
0 answers

How to customize markings in a Google Pie Chart using React and react-google-charts?

I am using the react-google-charts library to render a Pie Chart in my React application. I want to customize the markings in the chart to display the values in a specific format, similar to the example image below: Currently, my chart looks like…
0
votes
0 answers

Cannot create pie chart in react with react-google-charts, but I load the data

I use 18.2.0 and react-google-charts 4.0.0 in my useEffect I do const [zooChart, setZooChart] = useState({data : '', sum:'' }); useEffect(() => { //if no data, set data to false and return if (!data.info.data || data.info.data === undefined ||…
codebot
  • 517
  • 8
  • 29
  • 55
0
votes
1 answer

Make hAxis label center with respect to graph in React-google-charts (React Js)

I need to have centered data points in hAxis(x-axis) with respect to vAxis(y-axis), I tried with textPosition and but it doesn't work. Here, I have to center the dates with respect to the graph. Thanks for your minute for me!!!
Hema Ramasamy
  • 686
  • 1
  • 6
  • 16
0
votes
0 answers

Google chart animates in react without any interaction with graph data

I am using Google chart (react-google-charts) in react to create a stacked bar graph, and i am using animation to show data, but something very unexpected happened, some of the bars starts animating without any interaction with the graph data or…
Zeeshan
  • 371
  • 1
  • 3
  • 6
0
votes
1 answer

Grouping Gantt chart elements with the same field value on the same line

I can't get something Please take a look at the picture I have attached below Gantt And I already have absolutely all the values ​​​​to display this chart, and it even turns out like this, as shown in the second picture: MyGantt However, this is not…