Questions tagged [react-chartjs-2]
452 questions
3
votes
3 answers
The engine “node” is incompatible with this module when installing React-chartjs-2 Chart.js,
I am creating a doughnut chart by using chart.js with its react wrapper. It's working fine in the new project, but not able to install it in the main project.
Below is an example of a new project where it's working fine.
And below is the example of…
Supriya Kumari
- 181
- 2
- 14
3
votes
0 answers
Using react-pdf with react-chartjs-2 to generate a pdf
I've looked around quite a bit but I can't seem to find any examples of the use of these 2 libraries together. My project currently uses react-pdf to generate pdf reports but I need to add chartjs charts to some of the new files we'll be generating.…
Haq.H
- 863
- 7
- 20
- 47
2
votes
1 answer
Chart.js 3.7.1 remove the scale on the left with values
How to turn off the scale with additional marks from 0 to 45000 which I highlighted in the screenshot? I have tried everything possible.
it seems that it is possible to update chartjs to the latest version, but I'm interested in the possibility of…
Rafael Shepard
- 214
- 3
- 15
2
votes
0 answers
How do I prevent the legend from being cut off in react-chartjs-2's Doughnut Chart when displaying a large number of classes?
I have about 120 classes to be shown in Doughnut Char from react-chartjs-2. The doughnut is ok, but the legend is being cut (see image below). How do a show all classes in the legend?
enter image description here
This is the code I am using:
Flavio Luis de Mello
- 23
- 4
2
votes
1 answer
Line not drawn in Line chart with react-chartjs-2
I try to draw multi line chart (single line doesn't work as well) using react-chartjs-2 Line component
My data structure
const data = {
labels: dataFromDb.map(item => item.period),
datasets: [
{
data: dataFromDb,
…
Andyally
- 863
- 1
- 9
- 22
2
votes
1 answer
How to find X,Y coordinates on Half Doughnut Chart JS react
I've got the doughnut part of the chart complete and the gauge needle. I want to add this circular pointer on the doughnut instead of the needle. I was able to draw the circular pointer but couldn't find the right X,Y coordinates to place the…
SKR Sama
- 156
- 1
- 7
2
votes
1 answer
Double labels on x axis in chart.js
I am using chart.js with react-chart-2 in react , but i got double labels below x axis how can i prevent it .
import 'chartjs-adapter-moment';
import moment from 'moment';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
…
Kartik Jangu
- 41
- 5
2
votes
2 answers
How to link 2 axes with chartJS?
I'm using react-chart-js 2 to display continuous data in scatter chart form. I wanted to put options on the charts but some of them do not work properly or at all.So i would like the x-axis not to move and the y-axis to readjust with the data except…
Feyto
- 255
- 11
2
votes
1 answer
React-Chartjs-2 How to create dashed gridlines
Im using react-chartjs-2 and trying to create dashed gridlines on the y-axis
I tried to look on Chart Config Web: https://www.chartjs.org/docs/latest/axes/styling.html#grid-line-configuration
But cant find the trick
Here is my code:
import { Chart }…
Naclin
- 23
- 3
2
votes
1 answer
Curved lines are not displayed with react-chartjs-2
I'm using react-chart-js 2 to display continuous data in scatter chart form. I wanted to put options on the charts but some of them do not work properly or at all. So I have problems with these following option: the lines are not curved between the…
Feyto
- 255
- 11
2
votes
2 answers
Render multiple chart simultaneously using react-chartjs-2
I have rendered bar chart without any errors. but while adding doughnut chart it's getting this type of error in console.
getting error when uncommenting doughnut chart component. i think the problem here is i may be missing any of the chart js…
Saikiran Jetti
- 37
- 4
2
votes
1 answer
chart js Cannot change label's point width and height
I have this settings
const options = {
responsive: true,
plugins: {
legend: {
position: 'bottom',
labels: {
usePointStyle: true,
pointStyle: 'circle',
// fontSize: 2,
// boxWidth: 6,
//…
Altro
- 878
- 1
- 7
- 23
2
votes
1 answer
react-chartjs-2 graph resulting in hundreds of pages when printing to PDF
I am currently trying to set-up a react-chartjs-2 graph on my React website. The chart appears fine on the website but when I try to print to PDF, it creates many blank pages.
"chart.js": "2.9.4",
"react": "17.0.1",
"react-chartjs-2": "2.11.1"
I…
J.Lau
- 21
- 1
2
votes
0 answers
React-ChartJs-2 matching label with dataset object
Im trying to use chartjs-2 Bar component to show registered data by user for each day. Each day can vary depending on how many times user decided to register data.
But what I want is to group values for the dates and show the data that the user has…
Asded
- 21
- 2
2
votes
0 answers
How to center align all bars in bar graphs in Chart.js (without adding null labels)?
I want to add space between two bars in vertical bar graph using react-chart-js
in below image I want to center align all the bars in Bar graph at center by adding some extra space to left and right of all the bars.
I tried using:
scales: {
…
Nimesh s
- 31
- 1