Questions tagged [react-chartjs-2]
452 questions
1
vote
2 answers
How to add conditional fill color in Chart.js area chart?
I am working on project that requires me to design a chart as the following diagram:
I am using chart.js and react to make the distribution plot. But I am not able to figure out how to add fill color of the area chart between a particular range of…
Aditya Bhattacharya
- 914
- 2
- 9
- 22
1
vote
2 answers
How to change React line chart tooltip title font family in chart.js
I am using "chart.js": "^3.7.1", along with react-chartjs-2 in react web app. I want to change the chart tooltip font family. Here is the options i am using in the chart. I am unable to apply font family to the line chart. i want to apply a custom…
1
vote
1 answer
Struggling to correctly update and re-render chart on react-chartjs-2
I am building an app for gym-goers to record and track their progress. For each exercise they input, it should render a chart showing their previous track record. This is working fine.
Users can then add another entry to this track record, but it…
Gordon Maloney
- 262
- 1
- 11
1
vote
0 answers
react-chartjs-2 `Canvas is already in use. Chart with ID '0' must be destroyed before the canvas can be reused` in a functional component
I currently have a dynamic graph that updates with the redux state in my react application, but after updating React to 18.0 I have run into a issue with react-chartjs-2 that is telling me I need to destroy the canvas before rendering a new chart.
I…
Blademaster680
- 202
- 2
- 8
1
vote
0 answers
Code returns a TypeError when defining a gradient-colored Bar chart in react-chart-js-2
I have been watching YouTube videos on how to have gradient charts using react-chart-js-2. I followed the steps they provided, but it seems to not work in my case. I encountered errors that they didn't encounter, particularly, a TypeError. I don't…
Lucky
- 129
- 3
- 11
1
vote
0 answers
Making amplitude smaller - React Chart.js 2-
I'm trying to do a weather app and used react-chart.js to do this image. My problem is that I would like to make the amplitude smaller (pic above), so that it looks similar to this.
This is my state that sets the data
setChartData({
labels:…
Jenny
- 494
- 1
- 4
- 16
1
vote
2 answers
how to change display and styles of the labels in react-chartjs-2
I am using react-chartjs-2 and I want the labels to be circular. also I want the chart itself with labels have a display of inline-block so that I get something like this photo:
[
but what I actually get is this :
and my code is here :
let _data…
fatemeh zamanipour
- 55
- 1
- 12
1
vote
0 answers
how to change the color of line graph border on hover chartjs?
I am trying to change the color of the border line on the hover.
when the line is hovered then gray the other dataset color
and just show the color of the highlighted dataset border
1- this when the first dataset 1 is hovering other line graph is…
Tariq Sajid
- 11
- 4
1
vote
0 answers
React Chart.js v3 : highlight series when mouse on legend
I am using react and chart.js.
I have a Line chart, and I would love to have a highlight on one of the series when the mouse is hovering the according legend.
I found some help but it looks like the code is only working for previous version of…
Théodore Otzenberger
- 65
- 6
1
vote
1 answer
react-chartjs-2 options are not recognized for Bars
I am trying to built a barchart component via "react-chartjs-2". I did pretty much paste my code from here: https://www.c-sharpcorner.com/article/create-different-charts-in-react-using-chart-js-library/.
This is how it looks:
import React from…
Jibbolito
- 183
- 1
- 8
1
vote
2 answers
How do I merge two Javascript Objects into one?
I Have two Array of Objects :
salesLabelData -
"salesData": [
{
"id": "weekly",
"chartData": {
"dataSets": [
{
"borderColor": "#2E87A8",
"backgroundColor": "#2E87A8",
"fill": "false",
"pointRadius":…
Nazir
- 414
- 2
- 10
1
vote
2 answers
Cannot read properties of undefined with react-chartjs-2 and chart js problem
When I want to use react chartjs it is giving me these errors
The version I use for chart.js is ^3.5.0 and ^4.0.1 for react-chartjs-2
I downgrade it to version 2 but it didn't work
Chart component codes
import React from 'react'
import { Bar } from…
siamak alipour
- 63
- 1
- 8
1
vote
0 answers
react-chartjs-2: how to fix stepSize on y axis without knowing max range
I'm trying to fix stepSize to 1 on y axis in my Line chart using:
const options = {
scales: {
y:
{
min: 0,
stepSize: 1,
},
x:
{
},
},
};
it is starting from zero,…
Kanika Singla
- 59
- 9
1
vote
1 answer
Chartjs sample can't be reproduced
I am looking to reproduce the result of this sample from Chartjs doc :
https://www.chartjs.org/docs/latest/samples/scales/time-line.html
What I am looking for is the scale result on x :
I use react with react-chartjs-2 and a simplified version of…
damjuve
- 314
- 4
- 10
1
vote
1 answer
Remove label from line chart - react-chartjs-2
I am looking to remove the labels that are in the square in the following picture: https://prnt.sc/26qc8uq. How would I do it? I tried with options: {plugins: {legend: display: false}} but it didn't seem to work. Package I am using is…
ImDarkk
- 215
- 2
- 10