Stack Overflow
Stack Overflow

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

React-google-chart not taking up the options

I am using react-google-chart for displaying my data in graphical form (Bar Chart), As per requirement I have to make a dual-y-axis chart I have already made that chart but the issue is that chart is not taking up the options. It is an Bar chart…
manish thakur
  • 760
  • 9
  • 35
  • 76
2
votes
1 answer

google charts bar horizontal move annotation position to center of stacked chart

I am using Google Chart's column graph chart. The chart is a stacked column chart with annotations for every data point of the stacked column. The annotation are at the right of the inside of the bar but I would like them to be centered inside of…
Stephane Marry
  • 23
  • 4
2
votes
1 answer

Google timeline chart make first column clickable

I am using google timeline chart. Is that possible to make the first column clickable by making it as an html? I try to make the column(User Name) to allow html, so that when I try add the row, I can make it as a link like this
chrisTina
  • 2,298
  • 9
  • 40
  • 74
1
vote
1 answer

Using a filter with a Google StackedColumn chart in gwt environment

I want to add a control filter to a StackedColumnChart. I am using com.googlecode.gwt-charts 0.9.10 and com.google.gwt.google-apis 1,0,2. I have been using the showcase at https://gwt-charts.appspot.com/ as a reference - specifically the Category…
Dave Breeze
  • 29
  • 4
1
vote
1 answer

Google Table chart is empty when I fill the data from my API

I am trying to make an app that displays all my users but I have trouble filling my table with my data. I am using react-google-chart. My table stays empty even when my data is not it just displays the information but is filled. My code import React…
Pierre Bourgery
  • 13
  • 3
1
vote
2 answers

Need to change markers from circle to icon in react-google-charts GeoChart

I am using react-google-charts library for my personal project and found there is a way to display markers on the map.
Chrismono Himawan
  • 35
  • 5
1
vote
0 answers

Google charts is not rendering properly in react js

I'm using react-google-charts for creating a Geo Chart. Sometimes the chart renders, sometimes it doesn't. When it renders, and I reload it disappears and doesn't render again. import React, { useState, useEffect } from 'react'; import { Box, …
ujjwal
  • 79
  • 6
1
vote
0 answers

How to display the Map values in javascript file to Google charts html file

I have a function and pushing some data into Map() and I want to display the values in the Map to google chart. I'm relatively new to google chart and not sure How I can connect the Map in javascript file to google chart file in .html…
ArrchanaMohan
  • 2,314
  • 4
  • 36
  • 84
1
vote
0 answers

React Google Pie Chart Not Displaying

I am creating a react web app and I am going to be displaying data using googles charts for react. I have a function displayDataChart() that returns a pie chart with dummy data to test. However, when I boot up the website on local host, the graph…
billycodes
  • 11
  • 2
1
vote
1 answer

Error with getting ID of current tab in Google Chrome extension in Manifest V3: Uncaught TypeError: Cannot read properties of undefined (reading 'id')

I am currently attempting to create a Google Chrome extension in Manifest V3 and keep encountering the following error: Uncaught TypeError: Cannot read properties of undefined (reading 'id') I've searched far and wide and every solution I've found…
May
  • 23
  • 4
1
vote
1 answer

Using setSelection in react-google-charts

I have a problem with setSelection method. I am able to use getSelection, for instance in chartEvents: chartEvents={ [ { eventName: 'select', callback: ({ chartWrapper }) => { const chart = chartWrapper.getChart() const selection =…
Adam Janáček
  • 11
  • 1
1
vote
1 answer

PrimeReact using built in Charts and Google Charts together

I'm using primereact and react-google-charts. However, they both want me to call the components as Charts. When I write a chart, I get an error. What solution should I…
SelimSezer
  • 29
  • 6
1
vote
1 answer

google charts trigger tooltip

I created two doughnut google charts on my website and I turned off legend. I also stylized the html of tooltip and when I click on the piece of doughnut I am able to trigger the tooltip. The thing is that I want to trigger the specific part of…
user2807536
  • 81
  • 1
  • 1
  • 4
1
vote
1 answer

How to remove all chart axis and labels from Google Charts?

I'm using following code, but still can't get rid of horizontal axis and labels. var options = { legend: 'none', tooltip: {trigger: 'none'}, hAxis: { gridlines: { count: 0, color: 'none' } }, …
Ocean Overflow
  • 339
  • 2
  • 14
1
vote
0 answers

How to use Google stock chart in React JS

This is a google chart I need such a chart in my react js project I have daily data so I will start the timeline in one month. If anyone has any answers, please do let me know. Gratitude. exampaleData = {[dateInTimeStamp, price], [dateInTimeStamp,…
Kamlesh Gorasiya
  • 15
  • 3
1 2
3
…
11 12