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
9
votes
2 answers

How to make react-google chart dual-y-axis

I am working with react-google-chart and what I want to do is to make a dual-y axis ColumnChart I have done it with plain Javascript google.charts.load('current', { 'packages': ['corechart',…
user11543110
7
votes
3 answers

How to make react-google Chart label clickable

I am working on react google-chart react-google-chart and it is working fine. What I want to do is to add click event to the labels of horizontal axis and get the label name and do what ever I want to do I have google a lot but haven't found a…
user11543110
6
votes
1 answer

Generate chart in table cell according to json values

I need to create a bar or column chart inside a table cell of each row. i.e I need a graph to be populated for each category inside table cell. JSON: [ { "Chocolate": [ { "kisses": [ { "2022": { …
user3599302
  • 108
  • 2
  • 4
  • 21
5
votes
2 answers

How to call a click event on react geo chart?

I have basic geo chart from react geocharts console.log('test')} select={console.log('test')} …
Red Baron
  • 7,181
  • 10
  • 39
  • 86
4
votes
1 answer

How to create a bar or column chart inside a table cell of each row

I need to create a bar or column chart inside a table cell of each row. here is my json [ { "Chocolate": [ { "kisses": [ { "2022": { "jan": 2000, "feb": 1200, "mar":…
4
votes
1 answer

How to convert server side Json data into react-google-chart format in Reactjs

I have the following output coming from my backend [ { "_id": null, "counts": [ { "department": "Cleaning", "number": 1 }, { "department":…
8SINS
  • 431
  • 2
  • 6
  • 16
4
votes
3 answers

How to animate a google material bar chart

I'm drawing a react google bar chart (the material one) in a react project and I'm trying to make an animation. I've read that this kind of chart doesn't support animation but I need to do it, there has to be any way to do it. It's hard for me to…
Xim123
  • 145
  • 3
  • 21
3
votes
2 answers

How to use google chart in React-Native?

I am trying to use google charts in my react native app. Below is my code: import React, {useState, useEffect} from 'react'; import {StyleSheet, View} from 'react-native'; import {WebView} from 'react-native-webview'; import {Chart} from…
3
votes
0 answers

How to add custom markers using react-google-charts GeoChart?

I'm using google charts to display markers on the map. It only has simple circles. I want to use custom images and animations if possible.
ozansozuoz
  • 217
  • 1
  • 13
3
votes
1 answer

Google Charts Rendering Empty Chart addRows() Errror

I have a JavaScript array which looks like this: [ {x: "Station a", y: -77.33333333333333}, {x: "Station b", y: -19}, {x: "Station c", y: 9.492537313432836}, ... ] I wish to create a bar chart using Google Charts. The following code gives me an…
3
votes
1 answer

Sort X axis in google charts by month names

I want to sort the month names on the X axis using google charts. I currently use dataGroup.sort([{column: 0}]); to sort alphabetically. How do i sort the values w.r.t the month? var dataGroup = google.visualization.data.group( …
3
votes
1 answer
3
votes
0 answers

How to create a horizontal timeline/calnder in JavaScript/React?

I have events which I want to display as shown below: The features which are important to me: 1. Week days/calender days are displayed as rows and not columns 2. The whole 24h of a day are shown I have tried to use react-google charts. But it's a…
siva
  • 1,183
  • 3
  • 12
  • 28
2
votes
1 answer

React Google Charts not showing the data

I am using react-google-charts in my website, but the chart is only showing a black image (but if you hover on the chart, it will show the information of each bar, like shown in the photo): Screenshot There are no errors in the console. I have tried…
HannaSwDn
  • 31
  • 1
  • 2
2
votes
0 answers

React Google Charts is constantly Re Rendering the charts

I am working on React Google Charts to create few graphs for a project. The problem that I am facing 2 problems. 1- The Charts are re-rendering constantly in DOM. DOM constantly updating due to charts re re-rendering 2- The tooltips are stretched on…
1
2 3
11 12