interactive react charting components using the chart.js framework
interactive react charting components using the chart.js framework
Questions tagged [react-chartjs]
585 questions
0
votes
1 answer
react-chartjs-2 responsive hot refresh (pie chart)
I'm currently working on a pie chart for which I want to change the layout depending on the size of the window (namely change the position of the legend from left to bottom).
function PieChart() {
const { width } = useWindowSize();
return…
Thanh-Quy Nguyen
- 2,995
- 7
- 30
- 46
0
votes
1 answer
Chartjs double bar chart cannot have multiple properties with the same name
I am attempting to plot a double bar chart in React.js using Typescript, however I receive the error 'An object literal cannot have multiple properties with the same name in strict mode'. The strange thing is the error is only on the property…
jamesheaton
- 3
- 3
0
votes
1 answer
How to show an inverted line in reactjs charts 2?
Is there a way to show inverted line graphs in reactjs-charts-2 ?
For example, we are tracking number of complaints per month.
The more complaints there are, the lower we want the graph to go, with 0 complaints being at the top of the graph.
So the…
DeltaTango
- 821
- 2
- 9
- 19
0
votes
1 answer
How to change 'backgroundColor' of a specific 'labels' instance in "react-chartjs-2"
I want to change the backgroundColor of only one record from 'labels' array. In my app 'labels' is set to an array of stringified numbers that come from the database. And I want the biggest number to be, let's say green. The rest should be, let's…
darius.maximus
- 49
- 1
- 9
0
votes
1 answer
React - how to get array from store before first render and use it as dataset for ChartJS
I've implemented my own method to handle click event at chart label (React ChartJS 2 library) and it's for filtering data. I have a little problem becouse I'm storing state of filters for specific user so at first, when I'm initializing view with…
Dominik Z
- 161
- 4
- 14
0
votes
0 answers
How do I only show a dot for every nth data point using React ChartJs?
I've searched multiple posts, the only answers I've found were for only showing every nth label. I am trying to only show every nth data point's dot, while still keeping the trend of the line with that data point. I hope that makes sense.
So for…
Kaleidics
- 177
- 3
- 16
0
votes
0 answers
ChartJS in React - changing dataset props doesn't change the view even when render method is triggered
I have a doughnut chart with static labels - what is changing, is only the data with values for labels. It's all about filtering data. But I have some weird issue and I can't figure out whats going on.
For example I've got something like…
Dominik Z
- 161
- 4
- 14
0
votes
1 answer
How to set prop data for chart.js in React?
I'm trying to fetch data from a SQL-database and show that data on a chart.js, but I'm getting this error:
Warning: Failed prop type: Invalid prop data supplied to ChartComponent.
My code looks like this:
import React, {Component} from…
Crocky
- 75
- 10
0
votes
1 answer
react-chartjs-2 Line Chart not updating with State
I know this issue is open in several forms but no one has provided any solution .
So what i'm facing is that react-chartjs-2 Line Chart is not updating with component state Here is the code
import React, { Component } from 'react';
import { Line,…
arslanmughal
- 88
- 1
- 11
0
votes
1 answer
Can't setState when using fetch even with arrow function
Im a beginner with react and I have tried to work with the fetch api. I want to fetch some data about population from an api. I have managed to retrieve the data but when i try to setState inside the fetch the charts doesn't update with the new…
Richard L S
- 33
- 1
- 3
0
votes
1 answer
Cant we pass state to reactchart databar:datasets:data?
I am trying to get the data from sqlserver and want to present as bar graph using reactchart.js. I pulled the data from sqlserver and set it to state. Why can't I use the state in the reactchart databar?
I'm getting the following error. I am new to…
dojox
- 41
- 6
0
votes
1 answer
make chartjs legend labels tabbable
I'm trying to make the labels on a chart tabbable.
In this implementation, I'm using react-chartjs-2.
However, the configuration options object remains standard to chartjs.
Example code:
const options = {
legend: {
onHover:…
curtybear
- 1,458
- 2
- 20
- 39
0
votes
1 answer
Chart.Js Bar Chart not showing Toolip in React App
i ran intro some trouble using chart.js in an electron wrapped react app. For some reason the tool tip on the created charts suddenly stopped working (it has already worked just fine). The chart seems to be drawn correctly, only the tooltip upon…
David Halbhuber
- 59
- 1
- 5
0
votes
1 answer
Re-draw Chart on button React chartjs
I have a bar chart that takes data according to the year. I take the current name of the year from the main component as follows:
App:
DonateChart:
A.Burdonskaya
- 511
- 1
- 4
- 27
0
votes
1 answer
time on x axis is not appearing using react-chart-js-2 with reactapp
I'm new to react and i'm integrating react-chartjs-2 to populate my data on the chart.
I'm using Bar chart to show the success and failure calls
1.)In the constructor i'm setting the parameters required for the chart to display setting for…
Ravikant Maurya
- 1
- 3