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

how to change candlestick color of google-charts?

I want to change the color of the lines representing the low and high points of the candlestick. But when I try, both the falling and rising candles change to the same color. like this. I want the falling and rising candles to have different…
code
  • 45
  • 5
2
votes
1 answer

Hide column in react google charts

In regular google charts I used to hide a column in google charts that didn't want to appear with below steps. view = new google.visualization.DataView(data); view.hideColumns([2]); chart.draw(view, options) now that I am developing react…
Mohammad I
  • 78
  • 5
2
votes
0 answers

How to solve changing react-google-chart size?

I am using the same chart component in the tabs. When the page opens the chart in the first tab looks normal size and when I click the second tab my second chart looks smaller. The size of the chart changes. And when I click a filter button for the…
edche
  • 636
  • 6
  • 33
2
votes
0 answers

Add custom icon on specific point on google charts timeline

I have a timeline using google react charts. const columns = [ { type: "string", id: "President" }, { type: "string", id: "dummy bar label" }, { type: "string", role: "tooltip" }, { type: "date", id: "Start" }, { type: "date", id: "End"…
r342346
  • 119
  • 1
  • 15
2
votes
1 answer

React Google Charts Custom Tooltip (AreaChart) only showing on one area

I am using react-google-charts to construct an AreaChart and am adding a custom tooltip to two different areas in my chart. My data array is of the format: ['X', 'NegativeY', 'PositiveY', { role: "tooltip", type: "string", p: {html: true}}] with my…
Sal
  • 302
  • 1
  • 11
2
votes
3 answers

Populate JavaScript Array from JSON Format

Hi I have JSON data that looks like this: [ {"Mean of Arrivals for each hour": {"03-04":-35.62,"04-05":-3.62,"05-06":-3.7} } ] I want to push it to an array, and have the array look like this: [ {x: 03-04 y: -35.62}, {x: 04-05, y:…
sppokky
  • 115
  • 6
2
votes
1 answer

Using Vue Google Chart - Geochart. Chart reloads on data change, but legend gets dropped

I am using vue google charts in my nuxt project. When I change date selections, the data is mutated, and the computed method in my geochart component reads the correct new data.... But the legend at the bottom (color bar) does not work like it…
hungary
  • 41
  • 3
2
votes
0 answers

How to position a line over a Histogram in React Google Charts

I am using the React Google Charts plugin, and have been breaking my brain trying to implement this. The issue is the following. I want to draw a line over a histogram, depending on a user selected number, which is stored in a state. The best way to…
David Jentjens
  • 567
  • 7
  • 18
2
votes
1 answer

Reverse the bar chart in google charts

I am trying to create a bar chart using google charts but I need to reverse the directions of the bars. I have achieved it by setting hAxis: { direction: -1,} But the problem is only the direction of bars is reversed and the y axis labels are not…
Vishal Punj
  • 41
  • 2
2
votes
0 answers

vAxis with ticks doesn't work on Google Charts

https://jsfiddle.net/za1u62cv/13/ Here is my JS Fiddle. I followed the documentation page (https://developers.google.com/chart/interactive/docs/gallery/scatterchart#data-format) to make it work. I am sure that the format is correct, but the axis…
user6792790
  • 668
  • 1
  • 7
  • 22
2
votes
1 answer

How can I render a ColumnChart slider

I'm here because I'm in struggle with some sliders for my dataviz app. I already did a chart with a slider and it work fine, but now I want to do the same with ColumnChart instead of LineChart... : Here is the working code : width={"100%"} …
Stour
  • 43
  • 2
2
votes
1 answer

How to change options Google Charts Bar in react?

I am trying to create a bar chart with Google charts in react. I am researching for options field but I found when chartType="Bar", the normal graph options doesn't work. It should be chartType="BarChart"for working. But when I do this chart will be…
edche
  • 636
  • 6
  • 33
2
votes
0 answers

How Can I Change The Background Color of a Timeline using Google Charts?

Currently, I have an alternating background color in the timeline that I have created using Google charts. Here is the chart component: return (
ShridharK
  • 365
  • 2
  • 14
2
votes
0 answers

Google React Charts Placement & Legend Placement

I am having troubles placing the google react charts on the left of a full width container without the legend thinking it's being cut off. If I leave it as a default it looks like this: However I want it to be on the left side and the legend to be…
sens_vk
  • 171
  • 2
  • 13
2
votes
1 answer

Plotting data in react google charts

I've a JSON which is as: { "cod":"200", "message":0, "cnt":40, "list":[ { "dt":1601024400, "main":{ "temp":301.11, "feels_like":301.34, "temp_min":301.11, …
Ajay Kulkarni
  • 2,900
  • 13
  • 48
  • 97
1
2
3
…
11 12