Stack Overflow
Stack Overflow

Questions tagged [react-chartjs]

interactive react charting components using the chart.js framework

interactive react charting components using the chart.js framework

585 questions
2
votes
1 answer

With react-Chart-js2, is there a way to add more fields to the datasets, for example, text that accompanies data that was submitted?

I have a chart that displays people's predictions on events from a scale of 0-100. To accompany their submissions, I ask for a comment explaining why they said what they said. This is a crowdsourcing project so it would benefit other users if they…
fourteen14
  • 75
  • 7
2
votes
1 answer

react chart.js time scale does not work with date-fns adapter

I am trying to get the time scale (x axis) work with date-fns adapter and getting "error" for chartjs-adapter-date-fns which could be the issue: Could not find a declaration file for module 'chartjs-adapter-date-fns'.…
koubin
  • 579
  • 5
  • 9
  • 30
2
votes
1 answer

How to show a "total" sum label on the top of stacked bars

I'd like each stacked bar to have their "total" label position just above the entire bar. I've managed to get the sum, but I'm having trouble positioning the label at the top. If you notice, the labels are positioned at the bottom: I've tried…
Mike K
  • 7,621
  • 14
  • 60
  • 120
2
votes
0 answers

Custom legend labels react-chartjs-2

I look all over the chartjs documentation and StackOverflow issues but can't find an example of how to custom legend labels in react-chartjs-2. I want to switch the default labels to checkboxes like the photo: can someone please help me with that?
Daniel Raz
  • 41
  • 4
2
votes
1 answer

How to change default label of each bubble in bubble chart using chartjs-plugin-datalabels

I am trying to add labels to each bubble in the bubble chart using chartjs-plugin-datalabels. For each bubble, I want to show the label property of each object of data.dataset array like "Grapefruit", "Lime". I am getting the value of r for all…
James_sheford
  • 153
  • 2
  • 13
2
votes
1 answer

How to set up Visual Regression of react-chartjs-2 component

I am trying to set up visual regression testing for react-chartjs-2 components with React Testing library. However, all of the snapshots that are being generated are blank, but the component renders properly in the browser. This is what I'm…
sutee
  • 12,568
  • 13
  • 49
  • 61
2
votes
0 answers

How to customize chart.js tooltip (react-chartjs-2)?

I need to create a customized external tooltip for my project. This is how it looks like now >> 2nd image is how it should look like >> My dataset: datasets: [ //Systolic Avarage Line -------- { label: 'Systolic Avarage Line', …
Oğuzhan Yıldırım
  • 146
  • 2
  • 12
2
votes
1 answer

React chartsJS streaming live data

I am trying to build a React ChartsJS live data streaming using Chartjs i managed to render the canvas on the page but for some reason, I still can't make move like a live line chart data I am not sure if I need to embed anything to the HTML page. i…
Abed Aarabi
  • 149
  • 9
2
votes
2 answers

How can I divide this Object.values with the total?

I have this where car is 2 and total is 12. So I wanted to get the percentage of this but this is in an Object.values(res) I wanted the dataset in the graph to be in a percentage value. Let's say car is 2 and the total is 12. So it should be 16.66%.…
JS3
  • 1,623
  • 3
  • 23
  • 52
2
votes
1 answer

How to style specific gridlines differently in chartJs?

I am using chartJS to draw a bubble chart with an x axis running from -5 to +5 and a y axis running from -5 to +5. I was able to change the grid line styling using x: { grid: { borderDash: [2, 10], lineWidth: 1, color: `#000`, …
Adam Goodrich
  • 25
  • 5
2
votes
3 answers

React-Chart.js : How do I increase the space between the legends and chart?

There are a couple of questions that run along the same lines as mine. However, these questions focus on simply chart.js. I have a similar problem but on react-chart.js. How do I increase the space between the legend and chart? I have used padding…
Lucky
  • 129
  • 3
  • 11
2
votes
1 answer

How to change React chartjs-2 legend click functionality to hide all except the one clicked?

React Chartjs-2 : How can I implement the functionality where when a legend is clicked, instead of hiding the clicked legend, all other legends/datasets get hidden?
Hardik Aswal
  • 227
  • 3
  • 15
2
votes
2 answers

How to highlight a section of a stack in all bars in a stacked barchart in chartjs

I have this stacked bar chart created using the component from react-chartjs-2 charting library. I used React to do this. But answers considering the equivalent in vanilla JS would also be very helpful! Now what I want is, when I hover over…
Saroopashree Kumaraguru
  • 405
  • 4
  • 11
2
votes
1 answer

How to change font weight of footer in tooltips in Chart JS

I am trying to change the font weight of footer in tooltips in Chart JS. According to this link (https://www.chartjs.org/docs/latest/configuration/tooltip.html#tooltip-configuration), footerFont seems to be the one to control this but I could not…
VII
  • 279
  • 2
  • 11
2
votes
1 answer

Can't resolve 'chart.js/auto'

I am trying to use chart-js and react-chartjs-2 but is showing following error: Failed to compile. ./node_modules/react-chartjs-2/dist/index.modern.js Module not found: Can't resolve 'chart.js/auto' in…
Ravishankar Chatterjee
  • 63
  • 1
  • 5
1 2 3
…
38 39