Stack Overflow
Stack Overflow

Questions tagged [react-chartjs-2]

452 questions
0
votes
1 answer

How to get the index of the barchart label that has been clicked with react-chart js-2?

I have tried the events provided in the documentation as well as some suggestions in some answers but they only work when the bar is clicked not the label. When I click on the label I only get an empty array on "element". Here is what worked for me…
AdamOB
  • 13
  • 2
0
votes
0 answers

How do i change the color of all other columns except the one i clicked on? (react-chartjs-2)

I would like all columns except the one I clicked to become transparent by 0.5 How can I do this? Example: https://codesandbox.io/s/github/reactchartjs/react-chartjs-2/tree/master/sandboxes/chart/events?from-embed
ne Pshetskiy
  • 1
0
votes
0 answers

How to set up chartjs(react-chartjs-2) time x-axis for multiple datasets

Situation: I get multiple datasets from my server, each dataset is loaded into a state and then split into data with keys and values([{x:'2021-10-25', y:20},...]). My goal is to display the correct chronology for the dataLabels ('x' values) which…
Gev
  • 1
  • 1
0
votes
2 answers

I have a chart but it is not updating the chart with react chart-js-2

I have a react weather project which is based on API I have a component called CHART but it is not updating the most important part of the project. Whenever I type the city name it is getting all the information's and updating the written part of…
barisdevjs
  • 59
  • 3
  • 10
0
votes
0 answers

How To Pass Dates As Dataset in ChartJS

I have created a chart and instead of numbers I want to show dates in xAxis and I want to set the progress of the bar as per the difference of days between two dates, for example on the first column in Week 1 inside W1 I want to show blue bar from…
Zain Khan
  • 1,644
  • 5
  • 31
  • 67
0
votes
1 answer

Chart.js: hide dataset line but keep ticks on y-axis?

I have the following Line chart with two datasets that share the same x-axis labels. I'd like to know if is it possible to hide one of them but keep the labels (e.g. from 100 to 500) on the right y-axis. My intent is two show just one line that…
Barnercart
  • 1,523
  • 1
  • 11
  • 23
0
votes
1 answer

How to plot a line chart which has both the start and points outside the canvas area using Chart.js

I am currently using chart.js "2.9.4" and the "react-chartjs-2 "2.11.1". My goal is to draw a line chart which has only two data points. Both these two data points are outside the canvas. Here I attached a reference image. Please help me to find a…
Naveen Fernando
  • 142
  • 7
0
votes
1 answer

How to pass a fetched object from App.js to a child component asynchronously in ReactJS v16+

TL;DR How to pass a fetched object from App.js to a child component asynchronously? Do I have to wait for the whole data to be fetched and then return App.js? If so, How? I'm trying to create a dashboard with react-chartjs-2 where it fetches data…
Daniel
  • 103
  • 1
  • 9
0
votes
0 answers

How can I export to image a Chart with react-chartjs-2 and add logo or whatever stuff in image?

I need to export to image a Chart with react-chartjs-2 and add logo or whatever stuff in image. I'm doing this const exportImage = useCallback(() => { const link = document.createElement("a"); link.download =…
Jonathan Ludeña
  • 1
  • 1
0
votes
1 answer

Chartjs draw not all data

I need to show 127 bars but ChartJs display only 6 labels and all bars. How to increase bar height and make it more readable? I can't set fixed height to canvas because the chart can draw 1, 10, or 150 bars, it depends on received data. Sandbox:…
Av0me
  • 3
  • 3
0
votes
0 answers

Cannot get subtitles to render in react-chartjs-2

Anyone know why subtitles will not render in react-chartjs-2? Everything else seems to work fine. The title renders and I can get data to display on the chart. But adding a subtitle does nothing. Here is my chart options object: const chartOptions =…
Wikkyd
  • 51
  • 2
0
votes
1 answer

how to create a react-chart.js gradient line in typescript

I am trying to create a gradient line using react-chartjs-2 and typescript Evertything is fine up to the point where i am trying to create a gradient line, This is where typescript throws an error i am having a hard time getting rid off. here is the…
julBayonna
  • 409
  • 7
  • 19
0
votes
0 answers

Binding element 'param' implicitly has an 'any' type

I got the implicitly 'any type' with React Typescript when building a generate data function (for the chart). So, what type it should be? My code is: interface dataType { label: string; topic: { A: number[]; B?: number[]; C?:…
Banus
  • 79
  • 1
  • 8
0
votes
0 answers

react I want to adjust the display area of the y-axis in react-chart-2

I am using react-chart-2. I would like to set the minimum value of the y-axis to 0 and the maximum value to 100. Now, the y-axis is determined according to the data value. How can I customize the value of the y-axis? code import…
aahhuhuhu
  • 413
  • 1
  • 9
  • 26
0
votes
1 answer

TypeError React-Chartjs After Upgrading to Chart.js v3​

Our react site is based on the argon-pro-dashboard framework. After updating to chart.js@^3.6.0 & react-chartjs-2^4.0.0 we are getting some erros: TypeError: Cannot read properties of undefined (reading 'prototype') src/variables/charts.js:28 25…
Tal Meged
  • 1
1 2 3
…
29 30