Stack Overflow
Stack Overflow

Questions tagged [react-charts]

17 questions
6
votes
2 answers

Convert react-charts funtion component example to class component

Hey I'm having a lot of trouble trying to implement this example into my React project. The example is different to how I've set mine up and I can't convert it from their way to my way. I have a graph but I really would like the gradient colors to…
MomasVII
  • 4,641
  • 5
  • 35
  • 52
2
votes
0 answers

How to center align all bars in bar graphs in Chart.js (without adding null labels)?

I want to add space between two bars in vertical bar graph using react-chart-js in below image I want to center align all the bars in Bar graph at center by adding some extra space to left and right of all the bars. I tried using: scales: { …
Nimesh s
  • 31
  • 1
2
votes
0 answers

React-Bootstrap tabbed component changes size of default active tab content

I have a tabbed component made with react boostrap. I have 4 different charts (made with react-charts js 2). Each of them is a child to a parent Tab. So far I did pretty well; I was able to give them a desired size with a css class called…
nicolasgeronimorodi
  • 21
  • 2
2
votes
5 answers

react-chart2: giving me Cannot read properties of undefined (reading 'map')

I am trying to use react-chartjs-2 in my project to create a chart and I am getting the following error: TypeError: Cannot read properties of undefined (reading 'map') setDatasets C:/Users/vivek/code/src/utils.ts:46 43 | currentData:…
vivek kn
  • 107
  • 1
  • 18
  • 45
1
vote
0 answers

React charts breaking the lines issue

I am using React-Charts 3.0.0-beta.38. I am getting these charts (image below) when having a value equals null, I want something similar to spanGaps that exists on chartjs https://www.chartjs.org/docs/latest/charts/line.html#line-styling. So instead…
AWIXOR
  • 406
  • 4
  • 15
1
vote
0 answers

How to style the axis label for a bar chart using React-chartjs-2

bar-chart I have to make a bar chart like in the photo above which has rounded corners with a linear gradient background and the x-axis label should also have a background and rounded corners using react-chartjs-2 My current code is: Chart.js import…
Krithika Krishna Prakash
  • 13
  • 5
0
votes
0 answers

react-charts error: Cannot read properties of undefined (reading 'some')

I'm hoping somebody can help me with this error I keep getting while trying to implement a line chart from react-charts ("react-charts": "3.0.0-beta.38"): Uncaught TypeError: Cannot read properties of undefined (reading 'some'). I have a page where…
jansyb04
  • 143
  • 2
  • 11
0
votes
0 answers

Customization of React Chart.js (Doghnut type)

I'm using Doghnut type chart of React Chart.js in my React Project. What I need to do is to customize its styling. I want to place text inside its ring and show the percentage of each section outside. Here is it's code: import React from…
Fuaad
  • 197
  • 15
0
votes
1 answer

How to change position and styling of Tooltip in React Chart.js?

I'm using line chart in my React Project. What I need to do is to customize the styling of tooltip and change its position. Currently it shows at the bottom left of the chart when hovered(although it shows on the hovered point of line in its…
Fuaad
  • 197
  • 15
0
votes
0 answers

React CChart Customization

I'm using React CChart in my Project in which I need to make following customizations: Show the labels below doghnut chart Display the labels in circular shape Different border radius for each section in the chart Here is the code: import…
Fuaad
  • 197
  • 15
0
votes
0 answers

Tooltip is not moving with cursor, instead remains at top left corner of webpage (React-charts)

I just started working with react-charts and used simple/example from codesandbox. Current project files can be found here. Can any one have a look at it and help me to get a sticky tooltip or any way to disable tooltip? I have deployed the repo in…
Gaurang Patel
  • 13
  • 2
0
votes
0 answers

java.lang.Double cannot be cast to abi47_0_0.com.facebook.react.bridge.ReadableMap (Error)

I Installed Rainbow-me animated chart, followed the proper steps provided, installed react-native-reanimated and followed each and every step similar. But I got the error mentioned above! Here is my code: ** HomeScreen.jsx : ** import React from…
Aayush Pandey
  • 11
  • 1
0
votes
0 answers

Change point size dynamically

Is it possible to change the point style of a line chart dynamically? Specifically, when clicking on the legend item. For example, here the line width changes, but the points in the graph don't. legendItem.onclick = (e) => { …
abyrne85
  • 1,370
  • 16
  • 33
0
votes
0 answers

React Graph - % of times under values

Data : Times to do a task (5, 10, 15, 20, 25, 30 minutes for example) What I want : X-AXIS : % of times Y-AXIS : Times (5, 10, 15, 20, 25, 30, 35) Create a react graph that displays the % of times (X axis) that are below such or such value (Y axis)…
77140B
  • 41
  • 6
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…
Ketul s
  • 55
  • 1
  • 8
1
2