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…
-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…
-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…
-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?
-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
1 2 3
29
30