Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
Add space between point of the chart and of the border chart in react-chartjs-2
My chart:
and options for chart:
const options = {
scales:{
yAxes:[{
scaleLabel:{
display: true,
}
}]
}
};
Now I…

Утка Обычная
- 85
- 1
- 2
- 9
-1
votes
0 answers
Reactjs half circle with arrow like barometer
I want to ask you guys about chartjs.
I have work to do in order to create a functionality like this.
I tried it on stackblitz, and the result is as follows.
My expectation is:
When the idealValue is less than 30, the arrow (which is red) points…

Arbi Dwi Wijaya
- 21
- 3
-1
votes
0 answers
Requested Module does not provide and export name default
Im trying to create a chart with react-chart2.js in my react and typescript project but it keeps giving me this error "Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/chart__js.js?t=1691083062256&v=d3a1fbc2' does not provide an…
-1
votes
1 answer
how to manage gap for same categoryType in react-chart js 2
import React from "react";
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from "chart.js";
import { Bar } from "react-chartjs-2";
import faker from "faker";
ChartJS.register(
…
-1
votes
1 answer
Is there way to show tooltip on radar char label?
image from https://www.chartjs.org/docs/latest/charts/radar.html
I know that I can show tooltip on dataset,
but is there any way to display tooltip on label?
for example, when I hover on 'Drinking', I want to show description about the label.

amu03
- 129
- 11
-1
votes
1 answer
chart not working its rendering a blank page but it is working fine for the bar component
I am trying to render a simple chart it is working fine for Bar component but when i change to the donut component or any other components then its rendering a blank white page
import { Box } from "@chakra-ui/react";
import React from…

Pradeep
- 1
- 1
-1
votes
1 answer
(Typescript) How do you set pointRadius, pointHoverRadius, ect in ChartJs 3.7.0 & react-chart-js-2 4.0.1
Edit: This appears to only be an issue if you are using typescript. Thank you @LeeLenalee
I recently upgraded package versions
chart.js -- 3.2.1 -> 3.7.0
react-chartjs-2 -- 3.0.3 -> 4.0.1
Which broke my line chart:

Ryan E.
- 977
- 8
- 16
-1
votes
1 answer
How to increase the ghap between catergories or labels react-chartjs-2
I am working on react-chartjs-2 and want to increase the gap between labels to make it fit horizontal scroll.
const data = {
labels: labels,
datasets: [{
axis: 'y',
label: 'Line chart',
data: [7, 6, 2, 7, 6, 7, 8, 7]
fill: false,
backgroundColor:…

ZiaUllahZia
- 1,072
- 2
- 16
- 30
-1
votes
2 answers
React-chart.js 2 Error in modules but was already installed in the package.json file
I have already installed react chart js 2 but it still have this kind of error
./node_modules/react-chartjs-2/dist/index.modern.js
Module not found: Can't resolve 'chart.js'
This is my package.json file
BarChart.js
import React from…

JS3
- 1,623
- 3
- 23
- 52
-1
votes
1 answer
How to create a charjs bar graph with many bars?
I want to get the effect of something like this:
And here is my best attempt as a combo graph:
The problem is I need to vastly ramp up the number of bars in this chart. However, when I try to do this the bars disappear.
Here is my code as a…

kmm3
- 391
- 3
- 14
-2
votes
2 answers
How do I prevent my chart from rerendering? (ReactJS)
So everytime I use setState my component rerenders. But I don't want my chart to rerender. My question is how do I prevent my chart from rerendering?

TheDarkHunter
- 31
- 6
-2
votes
2 answers
How to disable event during a state change
Since my code base is quite big I will not add an example. Hopefully my question is clear enough.
I am using react-chartjs-2 in order to create a doughnut chart. I notice that every state change will probably trigger and event on the chart. I can’t…

angus
- 3,210
- 10
- 41
- 71