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…

Bhargav Singapuri
- 11
- 1
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…

lennartmllrschn
- 1
- 1
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

Gaurav Joshi
- 13
- 2
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