Stack Overflow
Stack Overflow

Questions tagged [react-chartjs]

interactive react charting components using the chart.js framework

interactive react charting components using the chart.js framework

585 questions
23
votes
1 answer

react-chartjs-2 fill property not working?

I want to add fill to a line chart using the react-chartjs-2 package. I'm passing fill: true to the dataset but that doesn't work as expected. Any suggestions? const data = { labels, datasets: [ { label: "Balance", …
Dimo Dimchev
  • 232
  • 2
  • 8
18
votes
3 answers

react-chartjs-2 not updating graph when state updates

I am creating a dashboard app that fetches data from an endpoint and uses the setState method to assign variables from the JSON returned by the endpoint to state variables. When I make a change to state, some components like 'react-svg-gauge' will…
Bryan Licata
  • 183
  • 1
  • 1
  • 7
18
votes
2 answers

ChartJS: How to set fixed Y axis max and min

I have a line chart which I'm trying to set a fixed max and min values. I have tried the other suggestions found on SO, but it still doesn't work. My chart keeps re-setting the max and min values depending on the incoming data. Here's my current…
Nayzer
  • 247
  • 1
  • 2
  • 9
13
votes
5 answers

ReactJS how to render a component only when scroll down and reach it on the page?

I have a react component Data which includes several charts components; BarChart LineChart ...etc. When Data component starts rendering, it takes a while till receiving the data required for each chart from APIs, then it starts to respond and render…
Shatha
  • 147
  • 1
  • 2
  • 9
12
votes
7 answers

Add text inside the Doughnut chart of the React-Chartjs-2 box to react

I created a Donut chart, which works correctly but now I need to show the number 45 in the center of this, for example. Where should I indicate the text to be displayed and the coordinates? In the options of the chart? I'm using react…
NelbeDG
  • 425
  • 1
  • 7
  • 19
12
votes
3 answers

How to Update chart in react-chartjs-2?

I call the update() function, but it does not work. TypeError: line.update is not a function. Why is update() not a function? I have seen this example on http://jsfiddle.net/zpnx8ppb/26/ where the update function does work Here is my code: import…
user8562024
10
votes
2 answers

componentWillMount for react functional component?

For react class component, we have the componentWillMount() lifecycle method, where we can perform tasks before loading the component. Tasks like, a call to backend and use the response to show that data in that frontend. What if I want the same…
kushal verma
  • 135
  • 1
  • 2
  • 11
10
votes
5 answers

Chart JS plugin to change line color depending on value

I am attempting to create a line chart where the color of the line (and the points) is dependant upon the value being plotted. For example if the value is above the following thresholds [0, 115, 125] then the color would be either ['green',…
Sheixt
  • 2,546
  • 12
  • 36
  • 65
10
votes
3 answers

How to show value of each bar in react-chartjs-2

I have a question about bar chart in react-chartjs-2. I made a bar chart and pie chart using react-chartjs-2 in my application. I could show the value of pie chart using a plugin calls Chart.PieceLabel.js. But I couldn't find a plugin for a bar…
aaayumi
  • 1,224
  • 8
  • 27
  • 47
10
votes
1 answer

Chartjs treemap example

I'm currently using chart.js in my project and I have to say it's an amazing library. However I recently realised I also need a "treemap" which I was unable to find on their website. Has anyone managed to implement a treemap example using chart.js?
Adrian Neatu
  • 1,989
  • 2
  • 19
  • 34
9
votes
3 answers

Can't resize react-chartjs-2 doughnut chart

I am trying to make a doughnut chart with react and gatsbyjs. The chart works fine but I can not get it to use the full width of the div. It displays too small for the area reserved. render (){ return (
Ergun
  • 458
  • 1
  • 8
  • 21
9
votes
2 answers

How to create stacked bar chart using react-chartjs-2?

I have to create stacked bar chart using react-chartjs-2. options : { maintainAspectRatio: false, tooltips: { mode: 'x-axis' }, scales: { yAxes: [{ ticks: { beginAtZero: true } }], …
Rahul Kumar
  • 143
  • 1
  • 2
  • 7
9
votes
1 answer

Add text inside doughnut chart from chart js-2 in react

i want to add a text message inside my doughnut pie chart. To be more specific i want something like this: I came across the same issue here in stack overflow by they use chart js in jquery and since i'm new to javascript i got confused. This is…
RamAlx
  • 6,976
  • 23
  • 58
  • 106
8
votes
7 answers

Chart.js2 Radar, how to configure the label padding/spacing?

I have the following Radar chart using Chart.js v2. My configuration: legend: false, scale: { pointLabels :{ fontSize: 16, fontStyle: "bold", } } The problem here is the "Communication" label has 0 padding between the label…
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
8
votes
1 answer

How to set options in react-chartjs-2?

React Charts 2 https://github.com/gor181/react-chartjs-2 is referencing below Chart JS http://www.chartjs.org/docs/#getting-started The docs in react-chartjs-2 references chart.js docs and they're all wrong. I can't figure out how to configure the…
ProgrammingGodJK
  • 207
  • 1
  • 3
  • 10
1
2 3
…
38 39