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
3
votes
1 answer

Setting up min and max in chartjs did not work

I have this graph, but setting up the min and max did not work. The y-axis still has the highest value as the one same on the data. How can I fix this? This is the codesandbox link:…
JS3
  • 1,623
  • 3
  • 23
  • 52
3
votes
2 answers

show more dataset than labels in chart.js

and thanks for your time. I would like to do this that you can see in the picture. chartJs line graph I have the values for the labels in array and values for the yAxes in other array. The labels show the 59 minutes of the hour, and i want to show…
ddaudiosolutions
  • 131
  • 2
  • 15
3
votes
4 answers

Module not found: Can't resolve '@reactchartjs/react-chart-2.js'

I am trying to implement this chart using the module react-chartjs-2 I installed the module: npm install --save react-chartjs-2 chart.js So I have this in package.json: "chart.js": "^2.9.4", "react-chartjs-2": "^2.11.1" I copied the chart…
AG_HIHI
  • 1,705
  • 5
  • 27
  • 69
3
votes
2 answers

Hide all labels and tooltips in Chart.js and make it very small size

So I am trying to create some minimalistic chart using react-chartjs-2 in my react app. What I want to achieve, is to have a very small chart without any kind of label showing inside a small card I have created. I want to hide labels, legend, even…
TheoKondak
  • 63
  • 1
  • 6
3
votes
2 answers

How to skip labels of a line in multiline graph in chartjs?

I'm trying to create an multiline graph using chartjs. On x-Axis I have dates and on y-Axis i have some amount in integers. I have two lines, one of them for user's expenses and other for income. For income I have data of only 2 dates but having…
Tushar Tambe
  • 115
  • 1
  • 8
3
votes
1 answer

Integrate chartjs-chart-treemap with react-chartjs-2

I would like to add a treemap chart from chartjs-chart-treemap into my existing project that uses react-chartjs-2. I tried so far: import ChartComponent from 'react-chartjs-2'; export default class TreeMap extends React.Component { render() { …
Dominik
  • 107
  • 8
3
votes
1 answer

react-chart-js-2 units on y axis

I'm using react-chart-js-2 and I want to add units to the y-axis. There doesn't seem to be much documentation about the full range of options and the tutorials I found don't seem to be working. I want to add a £ sign to every value on the y axis of…
Davtho1983
  • 3,827
  • 8
  • 54
  • 105
3
votes
0 answers

How to hide the grid lines of react chart js

I want to hide gridlines of react-chartjs-2 line chart. I have tried with the below code. But not working. scales: { xAxes: [{ gridLines: { display: false, drawOnChartArea: false, drawTicks:…
Ramesh Kithsiri HettiArachchi
  • 1,440
  • 13
  • 30
3
votes
0 answers

Chart.js Flickering on hover React

I have read multiple answers to a similar question and have tried everything but nothing seems to work. When I update the data on Chartjs bar graph and hover on the graph, it keeps flickering between the old and new data. Below is my graph…
user8930909
  • 35
  • 8
3
votes
1 answer

Grouped bar chart with react-chartjs-2

I need to show multiple values for a month, in a bar graph. Similar to this: But the only example I am coming up with, is stacked... where we have one bar, with multiple values. What I have at the moment: render() { const options={ …
Craig
  • 18,074
  • 38
  • 147
  • 248
3
votes
0 answers

Adding a bar (Vertical line) on react-chartjs-2 line chart

I'm using react-chartjs-2 as the chart library for my data visualization. I need to show one vertical line on a distribution graph. Example: I have tried to implement as below. I have tried to draw the vertical line by a small math calculation. Can…
Dinith Minura
  • 1,446
  • 2
  • 12
  • 24
3
votes
1 answer

Stacked bar chart starting from 0 - ChartJS React

I am building a simple horizontal bar chart. For each label, there are two data. One with duplicates, the other without duplicates. I want to create a horizontal stacked bar with both bars starts from 0. I managed to create a stacked bar but the…
Magofoco
  • 5,098
  • 6
  • 35
  • 77
3
votes
0 answers

How to add datasetKeyProvider to react chartjs

I have Line chart on my react project. I want to translate labels and chart breaks if component re renders after I switch language. Error is "Cannot read property 'getPixelForValue' of undefined" so if I hard code labels errors is gone. I found that…
youngster
  • 195
  • 1
  • 12
3
votes
2 answers

Accessing a slice of a react-chartjs Pie chart

I'm trying to create a static (non-clickable) Pie chart using react-chartjs-2. However I want one of the slices to "pop out", or appear bigger than the others: Hence, I'm trying to access one of the slices in the pie chart and modify its…
GalAbra
  • 5,048
  • 4
  • 23
  • 42
3
votes
1 answer

"Inline" labels in ChartJS

Is it possible to render a chart with "inline" labels between horizontal bars in ChartJS?
Paul Prescod
  • 443
  • 1
  • 4
  • 17
1 2 3
…
38 39