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

How to customise react-google-charts?

I want to customise legends and title of x-Axis and y-Axis in my bar graph. It is a react google chart. Here is my current graph having slanted legends, I want it to be as a graph in second image. Here is the code for bar graph chart that I want to…
1
vote
2 answers

component wont render when is useEffect() is ran once

So I have the following code, where I'm fetching data to be rendered in my component. However, if the useEffect is set to run once, it wont render the data inside the component, and having it constantly running is not sustainable. import React, {…
1
vote
0 answers

Module not found: Can't resolve 'react-google-charts/dist/types'

I am working on react application where I have used react google charts for displaying Line chart with annotation. But I am getting an issue with role attribute for column in Line chart, have already imported react-google-charts in the working…
1
vote
1 answer

Dynamically adding row to a timeline of Google Charts

I'm trying to add rows based on a specific data received. For now, I've stored that sample data in a constant. My Timeline component is below. YSD is year start date, msD is month start date, dsD is day start date. The same thing for yEd where e is…
ShridharK
  • 365
  • 2
  • 14
1
vote
1 answer

After the second click Modal is not showing in my react boostrap table

Im usign react boostrap tables but after i click it once, the second time i click in my table the modal is not showing. Here is my table component const CustomTable = ({ setStateName, setShouldShow }) => { const handleTdClick = ( {name} ) => { …
1
vote
1 answer

React Google Charts Candlestick colors and wicks not displaying

I am trying to implement the React Google Charts candlestick charts, and I am plugging in my own data into the charts but when the charts are displayed, the candlesticks are all being displayed in one color at a time even when I change the color…
1
vote
1 answer

Line chart total by month on tooltip

I am trying to total the value by month name on tooltip. I have line chart with month name on axis but when i mouse over the points it is showing individual records on chart. i want to show total by Month. var dateTicks = []; for (var m = 1; m…
Gaurav Singla
  • 51
  • 1
  • 7
1
vote
1 answer

react-google-charts Marker GeoChart markers not functional

I have been trying to use the react component from the react-google-charts API, however, I can't seem to get the markers to show up on the map. I noticed that even the examples of Marker GeoCharts on the React Google Charts site do not…
1
vote
1 answer

How to change the width of box in react-google-charts table?

Now, I have created table using - https://react-google-charts.com/table-chart#simple-example. But I am unable to change the width of box using react. I have found the documentation of Bar-format using JavaScript -…
1
vote
2 answers

How to color every bar in google timeline chart?

I have read some other answers here and accordingly added the role property but it did not work. Loading Chart
} data={[ [ { type: 'string', id:…
Rounak Jain
  • 409
  • 1
  • 5
  • 18
1
vote
1 answer

Google chart does not display when added to smarty template page (.tpl)

The google chart does not display in a page, the code is added to a page (.tpl) that is work with smarty. the code is as follow: {literal}
1
vote
0 answers

how can i do manipulation data in react js and google chart

I just started React. I am creating a dashboard where i can see skills (skill_name and skill_percentage ). i used for that Reactjs, bootstrap and Google Chart (Donut chart). but I'm not able to manipulation of data like. Update, remove and add new…
1
vote
0 answers

How to display custom image at the place of point in react-google-chart?

On the places of star I want to display some custom images like face emojis.I'm using the react-google-chart library here . So far, my code is as below import { Chart } from "react-google-charts"; ...
1
vote
1 answer

How to show google chart (line chart) information(label)?

line graph column graph My graph keeps call Controller to get recent info in Database time by time. There are two lines so I want to show the name of each lines(columns) like red=counts of something // brown=counts of something else. My other bar…
choky7
  • 33
  • 4
1
vote
0 answers

How to specify a different text color in react google chart's gantt chart?

If I am using the gantt.palette option to specify the colors of the bar groups in my gantt chart, as discussed in the answer to this question, is there a way to specify a different color for the text accompanying these items?
SomeRandomPhysicist
  • 1,531
  • 4
  • 19
  • 42