Stack Overflow
Stack Overflow

Questions tagged [react-chartjs-2]

452 questions
0
votes
1 answer

react-chartjs-2 error (Showing white screen)

I am getting this error while trying to add chart using react-chartjs-2. Error Log This is my code: import { Doughnut } from 'react-chartjs-2'; const data = { labels: ['Red', 'Blue', 'Yellow'], datasets: [ { data: [12, 15, 5], }, …
Anish Shrestha
  • 19
  • 1
  • 3
0
votes
1 answer

React-chartjs-2: How to display timeline of released dates over 5 past years in Bar Chart?

Given a structure like this const products = [ { id: 1, status: "released" }, { id: 2, status: "in progress" }, { id: 3, status: "in progress" }, { id: 4, status: "released" }, { id: 5, …
FD3
  • 1,462
  • 6
  • 24
  • 47
0
votes
1 answer

React-chartjs-2: How to add space between Chart and Legend?

I'm trying to add a space between the actual Chart and the Legend/labels. Legend has a position rigtht and I don't know how to add a padding/margin between Chart and labels. Found some discussions but not relevant to react hooks. From what I…
FD3
  • 1,462
  • 6
  • 24
  • 47
0
votes
1 answer

warning in chartjs/react-chartjs options assignment if setting type:'time'

I have the following options set: export const options = { responsive: true, scales: { x: { ticks: { maxTicksLimit: 10, autoSkip: true, color: 'white', }, type: 'time', adapters: { …
sev
  • 1,500
  • 17
  • 45
0
votes
1 answer

Chartjs: I only want left and right padding in pie chart

I have a case at work where I want to use a pie chart. For this I use Chart.js (with react-chartjs-2 library as a wrapper). I would like to have padding left and right in the canvas, but for some reason I always get top padding as well in that case,…
tilly
  • 2,229
  • 9
  • 34
  • 64
0
votes
1 answer

ChartJS - Why is the transition on the first dataset bad?

So I have react-datepicker to choose the dates of my data, the data that is returned looks like this: {clicks: 6, date: "2022-05-15", link: "instagram"}, {clicks: 5, date: "2022-05-15", link: "google"}... On load and every change in the datePicker,…
Jovaaa
  • 58
  • 10
0
votes
1 answer

My ChartJS Line needs to click the color legend first before it plots the data

I am using Chart JS to display sensor readings coming from a firebase firestore database. I encountered this weird bug where my chart doesn't plot initially the data >> https://i.stack.imgur.com/qD6Sd.jpg but after I click the color legend twice >>…
Dos
  • 3
  • 2
0
votes
1 answer

ChartJS in React throws 'too may re-renders'

I am trying to create bar chart using the ChartJS. When I start my app, there is nothing on web-page, and some errors in console: 'Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.' my code: import…
Jugennd
  • 66
  • 7
0
votes
1 answer

Is there a way to implement chart-js-plugin-waterfall as a react component

I'm facing a situation here, including React use coupled with the additionnal plugin from the chart.js library : chartjs-plugin-waterfall. I have to develop a personalised dashboard for my client, and until now I've been able to implement every type…
Benjamin Beugnet
  • 1
  • 1
0
votes
1 answer

Is it possible to set top border on ChartJS Doughnut Gauge chart

Target Doughnut gauge with green top border: Example Doughnut gauge: https://codesandbox.io/s/jlonjk9zv5 The question: Is it possible to implement abovementioned top green border on given example Doughnut gauge? Thanks.
moze
  • 322
  • 1
  • 5
  • 14
0
votes
3 answers

How does chart updating works within the context of react?

I currently have a Radar chart in chart.js using the react integration. I was suprised to note that, when I updated the data, instead of showing a completely new plot, it just transitioned smoothly from the previous dataset to the new one. What I am…
Stefano Borini
  • 138,652
  • 96
  • 297
  • 431
0
votes
1 answer

Labels for Nested Doughtnut Chart React ChartJS

I am trying to implement nested Doughnut using React-ChartJS-2 but the label seem not to appear correctly in the Outer Doughnut. Here is what I tried after checking out many examples online. The version I use for chart.js is ^3.7.1 and ^4.1.0 for…
Tee
  • 385
  • 3
  • 14
0
votes
1 answer

custom label title for scatter in React-ChartJS-2

I try to make a scatter plot using React-ChartJS-2. The basic setting gives only the values of the x-value and the y-value of the point in the plot. Is there any way to show the label for the point in the plot? I lookup around and found the code…
S. Lee
  • 1
  • 3
0
votes
1 answer

chartJS, how to disable user from clicking on legend names and changing the graph?

This is a react project. I'm running the latest version of all software. I am trying to create a pie chart but when the legend names are clicked, it changes the graph. So far I've tried each of the lines in the legend below. legend: { …
t20e
  • 13
  • 6
0
votes
0 answers

useState variable getting initial null value even after setting a value

I'm trying to generate a bar chart using chartjs with the useEffect i'm calling the generateChart method setting the new chart object in chartS variable. but in the initial load if I clicked on a bar, the filterChart method gets called in the…
RoHaN
  • 1,356
  • 2
  • 11
  • 21
1 2 3
…
29 30