Questions tagged [react-google-charts]
A thin, typed, React wrapper for Google Charts.
173
questions
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 ...
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 ...
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-...
-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 ...
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 ...
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 ...
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-...
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 ...
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:...
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 ...
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 ...
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 ...
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 ...
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 "...
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 ...
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="...
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....
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 ...
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%"}
...
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 ...
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 ...
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%"}...
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 (...
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.
...
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 ...
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, { ...
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 ...
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?
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 ...
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 ...
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!
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
...
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 ...
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?
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 ...
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 ...
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-...
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([]);
...
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 ...
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 ...
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
...
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[]
...
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 ...
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 ...
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 ...
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) ],
...
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 ...
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 ...
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....
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 ...