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
7
votes
2 answers

./node_modules/chart.js/dist/chart.js 695:18 Module parse failed: Unexpected token (695:18)

After running 'npm start' on my localhost, I am getting the following error: ./node_modules/chart.js/dist/chart.js 695:18 Module parse failed: Unexpected token (695:18) File was processed with these…
Tanya Singh
  • 71
  • 1
  • 3
7
votes
3 answers

TypeError: Cannot read property 'defaults' of undefined when using the react wrapper of chartjs

I'm trying to use the react wrapper of chart.js and I'm having an issue. When I'm trying to add a chart, there is an error (" TypeError: Cannot read property 'defaults' of undefined") The code is the following: import React, { useState, useEffect }…
Airea
  • 169
  • 2
  • 11
7
votes
1 answer

Chartjs 2 scaling lots of data points

I'm trying to render a line chart with 24 hours of data (collected every 30 seconds). I can't figure out from the docs how to get it to scale nicely. The docs say: When building its ticks, it will automatically calculate the most comfortable unit…
Toby
  • 9,523
  • 8
  • 36
  • 59
6
votes
2 answers

scattered graph with xAxes of date react-chratjs-2

I'm trying to implement a graph with scattered date properties but chart is rendering all the dates with the same distance from each other. { "ndvi values": [ 0.1158, 0.1975, 0.1913, 0.2137, 0.1603, …
Emad Baqeri
  • 2,333
  • 2
  • 14
  • 29
6
votes
1 answer

React ChartJS prevent new data from being added into state after it's redrawn?

I'm trying to update my chart using react-chartjs-2. I'm using date picker to filter different data and re-render the chart accordingly such as display data today, yesterday, last 7 days etc.. The data is being fetched from my database However, when…
Curious13
  • 329
  • 2
  • 23
6
votes
5 answers

Make a horizontal bar using react-chartjs-2

I'm struggling to find information to make chart with react-chartjs-2. I made a bar chart using react-chartjs-2. I couldn't find related information about making it horizontal bar. Is it possible to make a horizontal bar with react-chartjs-2? I…
aaayumi
  • 1,224
  • 8
  • 27
  • 47
6
votes
6 answers

Zoom and Pan in react-chartjs-2

I have recently implemented chart display using react-chartjs-2 (https://github.com/jerairrest/react-chartjs-2) I want to enable zooming and panning feature so that it will be more user-friendly in touch based screens. To implement this features, I…
krishna
  • 123
  • 1
  • 1
  • 12
6
votes
1 answer

How to remove gridlines and grid labels in Chartjs Radar?

With chartjs 2 type RADAR, how can you remove the gridlines and gridline labeling to make a radar chart more similar to the desired radar chart seen below? Current: Desired:
AnApprentice
  • 108,152
  • 195
  • 629
  • 1,012
5
votes
1 answer

Background-color for area below line chart in chartJs?

I am creating a chart to render some data using chart js. const data = { labels: ["1 Dec", "8 Dec", "16 Dec", "31 Dec"], datasets: [ { label: "Sales Made", data: [3, 7, 4, 5], borderColor: ["#03A9F5"], …
Amos Machora
  • 486
  • 3
  • 12
5
votes
1 answer

Datalabels plugin chartjs showing '[object]' instead of value

I am passing object from app.js file and stringify-ing it, but it's not correctly working in datalabels, and showing [object as shown in image Here is my code: [it's in ejs, but is almost same as js except passing variable as <%-variable%>, instead…
Abhishek Soni
  • 261
  • 1
  • 3
  • 12
5
votes
3 answers

React ChartJS 2 : Get data on clicking the chart

I found many other questions on StackOverflow as well as GitHub but none of them worked for me... I have a graph built using ChartJS. When I click on any of the bars(orange, green or red) I want to get the corresponding value. Is there any way to…
Rahul R
  • 75
  • 1
  • 7
5
votes
1 answer

React-Native Bar chart Customized

I am new to react-native. I need to place charts in my app (Bar, multi-line, multi-bar). What can be the best library to use and I want Bar chart with curvy edges not with the regular style. Thanks in advance.
Bhavani Kannan
  • 118
  • 1
  • 2
  • 10
5
votes
2 answers

Is it possible to set up 0 as a minimum number for bar chart? react-chart.js-2

I'm trying to make a bar chart using react-chart.js-2. I just noticed that all bar chart example start from the minimum number of the data, not 0. The example below, the bar chart starts from 40, not 0. What I want to do is to make a bar chart…
aaayumi
  • 1,224
  • 8
  • 27
  • 47
5
votes
3 answers

Chart js data to start at zero

That's how I set the data: const data = { labels: ['February', 'March'], datasets: [ { label: 'My First dataset', backgroundColor: 'rgba(255,99,132,0.2)', borderColor:…
shinzou
  • 5,850
  • 10
  • 60
  • 124
5
votes
1 answer

Chart.js with React

I want to implement charts in my project, and I decided to use react-chart.js I'm at the very beginning trying to add an example in my components, so I added this code : var MyChart = React.createClass({ render: function() { …
Elena
  • 569
  • 3
  • 7
  • 19
1
2
3
…
38 39