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
0 answers

Does react-google-charts built on top of google charts layer from google?

Does react-google-charts built on top of google charts layer from google?? How stable is the library? we want it to use for commercial purpose. Is it free?
0
votes
0 answers

Change color/size of legend pagination arrow. Google Charts

What is the simplest way to change the color/size of the legend pagination arrows for Google Charts? This is a react app using react-google-charts npm See circled in red. Thanks!
0
votes
1 answer

Google Chart , ControlWrapper change placeholder

How can I change the name of the text "Choose a value"? Example image! I tried it change the default or placeholder options and still the value of that text does not change. Help me please sleep(500).then(() => { var…
0
votes
0 answers

Cannot store the selection from Google Chart Treemap in a react state properly

I'm using the Google Chart Treemap in React.js. Here is the function, by clicking the rectangle on the Treemap, it should store the selection in a useState. However, after adding the setState in the ChartEvents, something goes wrong. I have to click…
0
votes
0 answers

Google Charts - How can you change the color of a line chart from a specific date that sits on the x-axis

I have this chart: How would I change the color to say that the line has gone past Feb 8, 2023 18:00:00?
redoc01
  • 2,107
  • 5
  • 32
  • 64
0
votes
1 answer

Error "Table has no columns." Does anyone help me?

Error "Table has no columns." It's not returning the API data in the React-google-Charts chart and I can't find the error, anyone to help me? I already broke my head here... It's a Column chart and it's already in the required format. default…
0
votes
1 answer

react-google-charts: displaying number not percentage

I have a project that contains several interfaces, and among these interfaces there is an interface to display statistics, And i use the following library: react-google-charts But the problem is that the number appears as a percentage and I want it…
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34
0
votes
1 answer

react-google-charts: Table has no columns and Cannot draw chart: no data specified

I have a project, and this project contains several interfaces, and among these interfaces, I have an interface for displaying statistics. In order to display the statistics, I used a library: react-google-charts But I got this problem: Table has…
Hiba Youssef
  • 1,130
  • 1
  • 12
  • 34
0
votes
0 answers

How do I populate a graph from react-google-charts with data from a rest api?

I'm starting my studies in react and I'm not able to display the api data in the graph. The chart renders blank. function ParticipationChart() { const [chartData, setChartData] = useState([]); useEffect(() => { …
0
votes
0 answers

How to create geochart of Gujarat State in react?

I am trying to create the geochart in React. Like this one I tried react-google-charts and react-leaflet but they're not compatible with this. Leaflet somehow tries to complete the job, but it seems complex. Is there any method to do this? Data…
0
votes
0 answers

how to assemble a sql query to return the following data?

i have the following schema of database in prisma and mysql: model User { id Int @default(autoincrement()) @id name String email String @unique password String massiva Massive[] city_alert City_alert[] status String…
0
votes
0 answers

How to add shadow or border on donut chart using Chartist

I am using a Chartist chart for showing data. I want to add a shadow on the selected slice of the chart on hover or mouse enter event. Attache below screenshot for the output enter image description here Attache below screenshot for the output enter…
0
votes
0 answers

Region is not getting selected in react-google-charts geo-chart

I am trying to highlight the selected region in basic geochart using react-google-charts. Here's how I want to do it jsfiddle. As you can see in above example when the region is clicked it keeps highlighted till next one is clicked. I have used the…
0
votes
0 answers

Is google chart supported in Preact?

I am trying to complete my application in preact. I am running into an issue now, I can't display and update google donut chart with data from preact. Is this possible? Can I use react-google-chart package in preact?
user325737
  • 31
  • 1
0
votes
0 answers

Google Timeline chart to display 2 rows of same name for a single day

I am trying to create a timeline chart with same start and end date. consider the following code,  dataTable.addRows([     [ 'Minister', 'Geo', new Date(1801, 2, 1), new Date(1801, 2, 10) ], [ 'Minister', 'Geo', new Date(1801, 2,…