Questions tagged [react-google-charts]

A thin, typed, React wrapper for Google Charts.

Filter by
Sorted by
Tagged with
0 votes
1 answer
19 views

i am unable to add dynamic data in react google charts in mern stack

I am unable to dynamic add my data in this chart. It looks like I am trying to create a bar chart using Chart.js and React. my code seems mostly correct, but it's missing some interactivity for ...
kartik Krishna sharma's user avatar
0 votes
2 answers
47 views

How to show value above bars in bar chart using react google charts?

I'm using react google charts to show my charts in react app. But I don't know how to show the value of bar chart above bars. The values are visible when I hover on them but I want it to show above ...
Shubhanshu Singh's user avatar
0 votes
0 answers
16 views

react-google-chart timeline, allowHtml doesn't work - renders at text

I'm trying to add the html tag to the label of Timeline from react-google-chart and I cannot figure out why it doesn't work. The HTML is rendered as text. 'use client' import {Chart} from "react-...
Malvinka's user avatar
  • 1,217
-1 votes
1 answer
25 views

react-google-chart Timeline label clickable

I'm creating a Timeline chart using react-google-chart. I'd like to make it so that every row works as a dropdown - when label is clicked more information is shown below (eventually that should show ...
Malvinka's user avatar
  • 1,217
0 votes
0 answers
26 views

How can I set up the className to a google chart in React to define the style in the CSS?

I'm trying to create with React a square with round corner and inside a donuts chart, then I have to put inside the hole the label. I'm not able to set the CSS style for the chart and I cannot find ...
Gerardo Colucci's user avatar
0 votes
2 answers
54 views

Foreach lopp only returns a result of SQL query - Laravel 8

I am using Google Charts to make a graph to show all my citizens ordered by class, everything works correctly except the recovery of the SQL query My function in my GraphicController is this public ...
Jahir Antúnez Antonio's user avatar
0 votes
0 answers
12 views

How to show the node in Sankey diagram when there is no link after the node

I want to show the node even it does not have linkage after. But currently when I added in the labels float at the top of the chart. Refer the example here, https://codesandbox.io/s/elastic-euclid-...
xsmei_88's user avatar
0 votes
0 answers
36 views

Customise node label and add title to Sankey diagram

I would like to add title to each level data of Sankey chart (act as column label) and each data label is labelling with count (which act like legend). One more, are we able to position the first ...
xsmei_88's user avatar
0 votes
0 answers
11 views

How to customise tooltip format in Sankey diagram

I'm having trouble in customising the tooltip format. Default tooltip format I'm expecting that we're able to update the font style of tooltip, its format and the style of tooltip box. Expected result:...
xsmei_88's user avatar
0 votes
0 answers
16 views

Sankey diagram get cutoff

The chart is cutoff for some parts even set the chart height higher. The container height is set as 100% so that it will resize follow the chart height. Even changed the container height > chart ...
xsmei_88's user avatar
0 votes
0 answers
30 views

How to generate data for different level in Sankey Diagram

Sankey diagram to generate: 3 levels of data where first level have 8 data, second level have 4 data and third level have 5 data. Using data below, 2nd Level Data 2 till 4 display same level as 3rd ...
xsmei_88's user avatar
1 vote
0 answers
13 views

React-google-charts. There are no availability to remove gradient in Geo-chart

I want to set up only 4 colors for all country in Geo Chart const colors = ["#D7D8D9", "#FCB8C9", "#FE557F", "#661529"] Geo - chart always shows some gradient ...
Ivan Pavlenko's user avatar
0 votes
0 answers
26 views

How do I overlay a Donut Chart over a Geo Chart using google-react-chart in React Js

How do I overlay a Donut Chart over a Geo Chart using google-react-chart in React Js. Is is even possible to do without using CSS properties. By passing some data or function or event to Geo Chart. To ...
KARAN TAK's user avatar
0 votes
0 answers
19 views

react-google-charts with spreadsheets does'nt work

I'm facing a problem where I can't render a google chart with the library react-google-charts. I looked its documentation and its examples with spreadsheets doesn't work also. import React from "...
JoaoVSBraz's user avatar
0 votes
0 answers
34 views

react-google-charts.com is that posible to add tootip on legend?

Title:react-google-charts.com is that posible to add tootip on legend ? Title:react-google-charts.com is that posible to add tootip on legend ? utl: https://www.react-google-charts.com/ code: import ...
Ravikiran's user avatar
0 votes
0 answers
38 views

React Google Gantt Chart not changing styles

I am working on a react component that utilizes a react-google-chart in the Gantt format. The Chart is the one shown below. <Chart width={'100%'} height={'400px'} chartType="...
Pedro Guilherme Rosa Lutz's user avatar
1 vote
1 answer
35 views

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....
Dave Breeze's user avatar
0 votes
0 answers
46 views

Reactjs: control tooltip values options by react-google-chart library

I have a project and in this project I have a chart And use the following library: react-google-charts The problem is that when i hover on any point, the Tooltip appears. Tooltip is contains two ...
Hiba Youssef's user avatar
  • 1,232
0 votes
0 answers
35 views

How to get label name onclick from a React google 3D pie chart?

I am trying to get clicked section label name of the 3D Pie Chart Google <Chart chartType="PieChart" data={this.state.agentsummary} options={options} width={"100%"} ...
Yuvaraj M's user avatar
  • 181
0 votes
0 answers
47 views

How to customize markings in a Google Pie Chart using React and react-google-charts?

I am using the react-google-charts library to render a Pie Chart in my React application. I want to customize the markings in the chart to display the values in a specific format, similar to the ...
Vishnu Viswanathan's user avatar
1 vote
1 answer
61 views

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 ...
Pierre Bourgery's user avatar
1 vote
2 answers
176 views

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. <Chart width={"200%"} height={"100%"}...
Chrismono Himawan's user avatar
0 votes
0 answers
73 views

Cannot create pie chart in react with react-google-charts, but I load the data

I use 18.2.0 and react-google-charts 4.0.0 in my useEffect I do const [zooChart, setZooChart] = useState({data : '', sum:'' }); useEffect(() => { //if no data, set data to false and return if (...
codebot's user avatar
  • 547
0 votes
1 answer
61 views

Make hAxis label center with respect to graph in React-google-charts (React Js)

I need to have centered data points in hAxis(x-axis) with respect to vAxis(y-axis), I tried with textPosition and but it doesn't work. Here, I have to center the dates with respect to the graph. ...
Hema Ramasamy's user avatar
0 votes
0 answers
53 views

Google chart animates in react without any interaction with graph data

I am using Google chart (react-google-charts) in react to create a stacked bar graph, and i am using animation to show data, but something very unexpected happened, some of the bars starts animating ...
Zeeshan's user avatar
  • 371
1 vote
0 answers
192 views

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, { ...
ujjwal's user avatar
  • 81
0 votes
1 answer
166 views

Grouping Gantt chart elements with the same field value on the same line

I can't get something Please take a look at the picture I have attached below Gantt And I already have absolutely all the values ​​​​to display this chart, and it even turns out like this, as shown in ...
Елена М's user avatar
0 votes
0 answers
31 views

Does react-google-charts built on top of google charts layer from google?

Does react-google-charts built on top of google charts layer from google?? How stable is the library? we want it to use for commercial purpose. Is it free?
harilika chandu's user avatar
1 vote
0 answers
44 views

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 ...
ArrchanaMohan's user avatar
1 vote
0 answers
86 views

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 ...
billycodes's user avatar
0 votes
0 answers
81 views

Change color/size of legend pagination arrow. Google Charts

What is the simplest way to change the color/size of the legend pagination arrows for Google Charts? This is a react app using react-google-charts npm See circled in red. Thanks!
Logan McNulty's user avatar
0 votes
1 answer
41 views

Google Chart , ControlWrapper change placeholder

How can I change the name of the text "Choose a value"? Example image! I tried it change the default or placeholder options and still the value of that text does not change. Help me please ...
Enzo Nuñez Pierattini's user avatar
0 votes
0 answers
51 views

Cannot store the selection from Google Chart Treemap in a react state properly

I'm using the Google Chart Treemap in React.js. Here is the function, by clicking the rectangle on the Treemap, it should store the selection in a useState. However, after adding the setState in the ...
BurBurGer's user avatar
0 votes
0 answers
53 views

Google Charts - How can you change the color of a line chart from a specific date that sits on the x-axis

I have this chart: How would I change the color to say that the line has gone past Feb 8, 2023 18:00:00?
redoc01's user avatar
  • 2,163
0 votes
1 answer
132 views

Error "Table has no columns." Does anyone help me?

Error "Table has no columns." It's not returning the API data in the React-google-Charts chart and I can't find the error, anyone to help me? I already broke my head here... It's a Column ...
Victor Cardoso's user avatar
0 votes
1 answer
217 views

react-google-charts: displaying number not percentage

I have a project that contains several interfaces, and among these interfaces there is an interface to display statistics, And i use the following library: react-google-charts But the problem is that ...
Hiba Youssef's user avatar
  • 1,232
0 votes
1 answer
115 views

react-google-charts: Table has no columns and Cannot draw chart: no data specified

I have a project, and this project contains several interfaces, and among these interfaces, I have an interface for displaying statistics. In order to display the statistics, I used a library: react-...
Hiba Youssef's user avatar
  • 1,232
0 votes
0 answers
130 views

How do I populate a graph from react-google-charts with data from a rest api?

I'm starting my studies in react and I'm not able to display the api data in the graph. The chart renders blank. function ParticipationChart() { const [chartData, setChartData] = useState([]); ...
Maicon Miranda de Jesus's user avatar
1 vote
1 answer
876 views

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 ...
May's user avatar
  • 23
0 votes
0 answers
84 views

How to create geochart of Gujarat State in react?

I am trying to create the geochart in React. Like this one I tried react-google-charts and react-leaflet but they're not compatible with this. Leaflet somehow tries to complete the job, but it seems ...
Dhruvkumar Patel's user avatar
2 votes
1 answer
529 views

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 ...
HannaSwDn's user avatar
0 votes
0 answers
53 views

how to assemble a sql query to return the following data?

i have the following schema of database in prisma and mysql: model User { id Int @default(autoincrement()) @id name String email String @unique password String massiva Massive[] ...
Rodrigo Brinate's user avatar
0 votes
0 answers
111 views

How to add shadow or border on donut chart using Chartist

I am using a Chartist chart for showing data. I want to add a shadow on the selected slice of the chart on hover or mouse enter event. Attache below screenshot for the output enter image description ...
Sumit Rawat's user avatar
0 votes
0 answers
217 views

Region is not getting selected in react-google-charts geo-chart

I am trying to highlight the selected region in basic geochart using react-google-charts. Here's how I want to do it jsfiddle. As you can see in above example when the region is clicked it keeps ...
krushnakantL's user avatar
0 votes
0 answers
71 views

Is google chart supported in Preact?

I am trying to complete my application in preact. I am running into an issue now, I can't display and update google donut chart with data from preact. Is this possible? Can I use react-google-chart ...
user325737's user avatar
0 votes
0 answers
65 views

Google Timeline chart to display 2 rows of same name for a single day

I am trying to create a timeline chart with same start and end date. consider the following code,  dataTable.addRows([     [ 'Minister', 'Geo', new Date(1801, 2, 1), new Date(1801, 2, 10) ], ...
krithikaGopalakrishnan's user avatar
0 votes
0 answers
80 views

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 ...
Emre Demir's user avatar
1 vote
1 answer
122 views

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 ...
Adam Janáček's user avatar
1 vote
1 answer
68 views

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 follow? (https://i.stack.imgur....
SelimSezer's user avatar
0 votes
0 answers
13 views

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 ...
Koustoobh Pareek's user avatar