Stack Overflow
Stack Overflow

Questions tagged [react-chartjs-2]

452 questions
4
votes
4 answers

How to show data value on top of bar in react-chartjs-2?

I made bar chart in react-chartjs-2. I want to show data value of each bar on the top of the bar. For that I used the plugin calls chartjs-plugin-datalabels But it's not showing anything. is it possible to show each value of bar chart ? I want to…
kritiverma
  • 61
  • 2
  • 7
4
votes
0 answers

Render bars from multiple datasets at full-width when there is no overlapping data in ChartJS

Examples within. For reference, I am using the latest version of ChartJS (3.2.1) and the latest version of react-chartjs-2 (3.0.3). I want to know how to make my bar chart display in a specific way given multiple, varying datasets. I'd like for the…
ActiveModel_Dirty
  • 510
  • 2
  • 12
4
votes
3 answers

React chart : prevent chart's canvas scaling with height and width

I am using Horizontal Bar from react-chart-js (https://github.com/reactchartjs/react-chartjs-2/blob/react16/example/src/charts/HorizontalBar.js) as below, const data = { label: ["graph"], datasets: [ { label: "A", …
Dy4
  • 687
  • 1
  • 9
  • 20
4
votes
0 answers

How to integrate chartjs-chart-financial with chart js

I'd like to use chartjs-chart-financial to plot a 'candlestick' chart. However, chartjs-chart-financial isn't published to npm yet. I run an npm install followed by gulp build in the directory that has the cloned repo from…
Atif Farooq
  • 41
  • 1
  • 2
3
votes
2 answers

How to add data with the label?

I am trying to add data to the Label. Currently, it's showing only the Label, How can I add data to the Label, for example, Red(12)? If I hover over the chart, it shows the number, Red # of votes: 12, Now in the Header, it's showing Red, I want to…
Mamunur Rashid
  • 1,095
  • 17
  • 28
3
votes
1 answer

Error with Storybook: Can't resolve 'react-chartjs-2'

I am using react-chartjs-2 in my next.js project and it works well when running the project. However, when I try to run Storybook, I get this error: ERROR in ./components/common/Chart/Chart.tsx Module not found: Error: Can't resolve…
Eulalia
  • 71
  • 3
3
votes
2 answers

React-chartjs-2 gradient fill error on canvas context

I have a react-chart-js2 component that I am trying to make a gradient on the fill however I am getting a few different typescript errors and cant seem to get it working. The documentation says to pass the data prop as a function with a reference to…
Jason McFarlane
  • 2,048
  • 3
  • 18
  • 30
3
votes
2 answers

Dynamically change type with react-chartjs-2 React

I'm using typescript in my project and I'm trying to change the type of chart, for example by button. And the official documentation of react-chartjs-2 declares the type as a const, so typescript doesn't compile it. What I should do and if it is…
SPR1NG
  • 174
  • 1
  • 11
3
votes
2 answers

Why would react-chartjs-2 not be able to see the data it needs to render?

Thanks for any tips and or help! I've hit a wall here trying to get a chart to render. I've reverted to testing a very simple approach (code below) and I am still getting the following error: TypeError: Cannot read properties of undefined (reading…
slobert
  • 71
  • 4
3
votes
1 answer

react-chart-js2 Showing Negative Axis when dataset contains all 0's

I am using react-chart-js2@3.3.0 with chart.js@3.6.2 When my dataset contains all 0s, the y-axis scales from -1 to 1 as such: See Image How do I make it start at 0 regardless? There seems to be a workaround for this: here and here but these…
user31529
  • 43
  • 3
3
votes
1 answer

React I want to add text to the react-chart-2 tooltip

I am using react-chart-2. Hover over the graph to see the tooltip. I want to display a % to the right of the number, like 30%. How can I add the % character to the tooltip? Also, how can I set the left value to a minimum of 0 and a maximum of…
user16590865
3
votes
1 answer

Chartjs 3.5.0 - Radar Chart - Converting the labels to images

I am trying to replace my labels for the radar chart with images, I had a look at How to add an images as labels to Canvas Charts using chart.js but it wasn't helpful, I have managed to get the chart from get canvas const callback = [ { …
Franky
  • 35
  • 5
3
votes
1 answer

How to update a react-chartjs-2 plot using useState()

I am trying to update a react-chartjs-2 plot passing the new fetch date as props from the App.js to the Chart.js component. I have created a button, that is linked to a function that calls for a useState in the main app. Currently I have created two…
Alberto
  • 33
  • 1
  • 4
3
votes
3 answers

how to change default font family in react-chartjs-2

i have bar chart with "react-chartjs-2", where should i put my font family for labels of chart in xAxes: this way:(not worked) this way not worked…
shahrooz bazrafshan
  • 545
  • 4
  • 17
3
votes
2 answers

How do I force Chart.js axes min and max with react-chartjs-2?

I'm trying to create a simple line chart with react-chartjs-2, and when I try to set the min/max values for the x- and y-axes, the values won't take. I've tried all the following for options, and none of them are enforcing my specified mins and…
HartleySan
  • 7,404
  • 14
  • 66
  • 119
1
2
3
…
29 30