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

React-Google-Charts Sankey bugging in responsive use

I'm working on a PrimeReact project. I used Sankey from Google-Charts (https://www.react-google-charts.com/examples/sankey). It works normally when not using any dynamic screen. However, as soon as I expand or collapse the sidebar, it stays like no…
0
votes
0 answers

Image required along with pointers in google chart

This is my current chart:-- enter image description here but i want this chart:-- enter image description here How can I achieve the same. I am using google charts to draw these charts in HTML/CSS/JS in my Salesforce VF page. Thanks to everyone who…
0
votes
0 answers

Using react-google-charts, how do I format hAxis labels for a timeline in a different timezone

Using react-google-charts, I have a timeline chart display a range of datetime values, but I need to label the hAxis using a different timezone. User is looking at data for an account in another timezone and they want to see the account timezone…
sjrcgtek
  • 18
  • 6
0
votes
0 answers

customise particular line colour for google line chart

Hey i have a query related to google line chart as i want to customise line colour as always green for login user and other colours for all other his friends according to there scores. data : : (4) ['2022-11-26', 880, 580, null] 0 : (4)…
0
votes
0 answers

How to customize the form of polynomial formula in more detail than just setting the number of dimensions in react-google-charts

Background I am coding an frontend page in typescript with react-google-charts to scatter plots and draw a 3-dimensional polynomial trendline based on the plots. I am required to draw the trendline whose formula should not be like "ax^3 + bx^2 + cx…
0
votes
1 answer

React Google Charts - Stacked Column Chart - Show Annotation on Bars

I am trying to get the annotation to show on the bars in a stacked column chart. I couldn't find an example of it anywhere. I read Google Chart docs - and it confused me on how to get annotations with the way the React example was. I am thinking…
RooksStrife
  • 1,647
  • 3
  • 22
  • 54
0
votes
0 answers

React google chart timeline handle event not working on first load

I have react google chart timeline with chartEvents. I want when clicked on define chart, display modal window. On first page load it doesnt work (and when I reload page). But if I going to another tab in my app,then return to my timeline and click…
0
votes
1 answer

Is there a way to pre fetch calls from a library in Next.js?

I am using GeoChart from react-google-charts (https://github.com/RakanNimer/react-google-charts) and I see that there are many scripts that load after everything was done. In my case https://www.gstatic.com/charts/geochart/10/info/mapList.js is…
Ionut Popa
  • 13
  • 3
0
votes
0 answers

Is it possible to add <1% in x-axis in column chart of react-google-chart

I want to add <1 % in x-axis of chart, Adding link below of my code, can I do it in any way? https://codesandbox.io/s/epic-shaw-zkgg0d?file=/App.tsx
Supriya Kumari
  • 181
  • 2
  • 14
0
votes
0 answers

Uncaught TypeError: getCharts is not a function or its return value is not iterable

I'm creating a React project that uses the React Google Charts library. Through an API call, I get information from the charts in an array and then loop through that array in a map to populate the object's charts property. However, when I call the…
0
votes
0 answers

React Google Charts not rendering when passed in props from Redux

So I want to use React Google Charts for my project and I'm using the Timeline component. When I pass a props data into it, it doesn't render the Timeline at all, showing me just an empty screen. The props data in this case is users. When I…
Owenn
  • 638
  • 1
  • 6
  • 23
0
votes
0 answers

react-google-chart not highlighted the mexicon states while in geochart mode

I am using react-google-chart. As per knowledge i am trying my level best to get the result but i stuck in the maxico states.Below is the code that i used please review it I am trying to highlight the Mexican states but don't know where I am doing…
0
votes
0 answers

X-axis does not show all the labels on google charts

I want to plot the date vs the number graph with react google charts. I have the array of data and it has 93 entries. I have the data from 2015 to 2022 for every month. Means there will be 12 entries for each year. I have plotted the line graph, and…
0
votes
0 answers

Putting image inside donut chart and putting label(Google chart)

So I am using google chart for the first time so What I need is a image inside a donut chart and also label it beside the donut chart. After my code what I got is like this: But I am expecting this as output: I am using React for the development.
0
votes
0 answers

Adding solid color from SVG file into a Google Timeline Chart

I am creating a google timeline chart in which I am using solid colors for each bar. I am setting colors to each bar in the following way, dataTable.addRows(['Washington', #f7cf2f ,new Date(2022,5,1), new Date(2022,6,2) ]) Current requirement, I…