Questions tagged [react-chartjs-2]

452 questions
0
votes
1 answer

Rendering issues when rendering a chartjs-chart-matrix

Hi I'm trying to use the chart matrix library mentioned in one of my react projects. I cant seem to get the chart to render the data on initial load but it renders correctly when i force a typescript error and undo the change (on my local machine at…
0
votes
0 answers

How to add shadow to an arc on hover? (Chart.js v3.9.1)

When I tried to create a custom plugin, it always changed the shadow of the entire chart. How can I only change the specific arc? Thank you. I want to add shadow to an arc on hover. Something like this
Devisfun
  • 1
  • 1
0
votes
0 answers

remove axes on graph created with react-chartjs-2 axes

I am learning react-chartjs-2 and I am recreating some of its examples. May I know why I get these grey axes with the following code? An image of the problem is linked on top. It shows the problem I am facing. import { Line } from…
Ice
  • 170
  • 9
0
votes
0 answers

chartjs bar chart, place bar between labels

I want to use chartjs for a bar chart and want each bar between the labels not the bar on the label. I want my bar represent a section [0 1] and not just a single value. I couldn't figure out a clean solution, so I don't really know if there is a…
0
votes
0 answers

getting rid of the delay on the start of realtime chart.js animation

I'm using the chart.js to display a realtime graphic and I would like to git rid of a delay and immediately start plotting from 0 y-axis Is this possible, thing to do? I've tried using: delay: 0 , but does not stop the delay..
alyssa
  • 9
  • 1
  • 2
0
votes
1 answer

React: reusable component keeps failing (too many renders | value doesn't show | uncaught errors | ...)

I'm relatively new to react and Javascript. I'm trying to create a Doughnut component with chartjs but after two days of trying different approaches, I don't succeed in producing the Doughnet that I want. The idea is to have a doughnut with the sum…
AGI_rev
  • 129
  • 10
0
votes
1 answer

Multiple Doughnut chart as markers over Openstreetmap

I'm in trouble while implementing the doughnut chart over OpenStreetMap. I'm using react-chartjs2 for the doughnut chart and react-leaflet for Openstreetmap. Like we use the location icon on different coordinates over the map but here I want to use…
user8086360
0
votes
0 answers

ChartJS combining similar or close y-axes

Say I have a chart here with 5 y-axes, I would like to know if it's possible to combine axes that are close to each other, at least 20% difference. Like 1.2m and 1.0m axes, there's 20% difference between them, hence I want them to combine into 1…
Tony Stonks
  • 360
  • 3
  • 13
0
votes
1 answer

react-chart-2 multi x axis

I am using react-chart-2 Line to show graph; What i want is to have 2 line in the same graph but instead of multiple value in y axis i want the same y axis but different label; example i have these label const colors = ['red', 'yellow', 'blue',…
Michel Gisenaël
  • 211
  • 1
  • 2
  • 15
0
votes
1 answer

How to change font color of labels react-chartjs-2 with V4.3.1

Having trouble with adding font color to black in the react chart js library chatjs data
0
votes
1 answer

React-chartjs-2: Reset zoom

I am using react-chartjs-2 to create a bar chart. I am also using the zoom plugin. Now I want to create a button to reset the zoom. For normal chartjs it works by calling the .resetZoom() function for the chart object. But I do not have a chart…
Adrian
  • 13
  • 4
0
votes
0 answers

How do I make datalabels always have a circular background in ChartJS

I'm using react-chartjs2 with chartjs and the chartjs2-datalabels-plugin. I need to display a label with a circular background on top of each bar in my chart. So far I am able to make the datalabel appear to have a circular background but it only…
Fer-de-lance
  • 375
  • 5
  • 23
0
votes
2 answers

Set active property on Bar chart on load

I have a Bar chart. I'm using react-chartjs-2 ("^4.2.0",) Chart.js ("^3.8.0",) My graph shows time periods and I want to highlight the latest time period once the component is loaded. Highlighting is done by setting the active property. It works…
AdamKniec
  • 1,607
  • 9
  • 25
0
votes
2 answers

ChartJS in NextJS throws error TypeError: Cannot read properties of null (reading 'useRef')

so I am trying to add graphs using ChartJS for my NextJS application. However, I seem to have issues rendering it. I also followed other tutorials and/or articles but it seems that I get the same error. The error I get is this: Server…
Seven
  • 330
  • 2
  • 15
0
votes
0 answers

"Type ... is not assignable to type ..." when using ReactJS with ChartJS?

I run a demo(draw a chart using ChartJS) when learn ReactJS in Javascript. But I really confused when I pass userData to it tells me this is an error, I will appreciate it if you can help me. This is the error in App.js, I…
Shaowen Zhu
  • 51
  • 1
  • 6