Questions tagged [react-chartjs-2]
452 questions
1
vote
2 answers
react-chartjs-2 doesn't work in typescript
I'm trying to create a Bar chart using chartjs and react-chartjs-2.
The chart component worked in javascript react, but now I need to use it in typescript and it returns an error:
TypeError: Comp is not a function
This is the bar component:
import…
Revi Bronst
- 11
- 3
1
vote
0 answers
How to limit height of plotlines in highchart graphs?
by default the plotlines are infinite but i want to restrict the height of plotlines
how can i achieve that without using below code
I want solution in ReactJS.
please help me with this if possible
thanks ✌️
I have tried searching documentation but…
Nimesh s
- 31
- 1
1
vote
0 answers
I am trying to integrate charts in my Remix application ,Can I really do that , if yes then how?
I used reat-chartjs-2 library and it throws an error
No "exports" main defined in ...path/node_modules/react-chartjs-2/package.json
I tried resolving those error but not able to find out how to integrate charts in server side rendering especially in…
sushil thorat
- 36
- 5
1
vote
1 answer
Module not found: Can't resolve 'react-chartjs-2'
I'm using chart.js v4.0.1 and react-chartjs-2 v5.0.1 and when i try to import react-chartjs-2 in my js file, it shows that module is not found.
import React from "react";
import {Line} from "react-chartjs-2"
function LineChart({ chartData }) {
…
john_smith
- 85
- 1
- 9
1
vote
0 answers
Next.js build error No "exports" main defined with chart.js
I am currently moving from craco (react-scripts) to Next.js but I have a problem in the build step. If I run the app in development it works perfectly but when I try to build it I get an error on the "Collecting page data", I tried
Updating Nodejs…
polmonroig
- 937
- 4
- 12
- 22
1
vote
1 answer
using react ionic 6 with chartJS
I'm trying to render a graph with ionic react but i keep getting errors such as:
Uncaught Error: Canvas is already in use. Chart with ID '0' must be
destroyed before the canvas with ID '' can be reused.
import { Bar } from…
Uria Levi
- 258
- 1
- 11
1
vote
0 answers
Chart.js with React ctx and canvas in null on rerender
I am using Chart.js 3.x.x with Next.js like so:
import { useRef, useState } from 'react';
import 'chart.js/auto';
import { defaults } from 'chart.js';
import { Bar, Doughnut } from 'react-chartjs-2';
import ChartDataLabels from…
XanderTEM
- 81
- 10
1
vote
0 answers
How to use a static color for Chart.js bar chart's legend, when using an array of background colors
I have a Chart.js bar chart that has its backgroundColor set as an array.
Example:
{
type: 'bar',
label: "...",
data: [...],
borderColor: '...',
backgroundColor: ["var_color1", "var_color2", ..., "var_color3"],
yAxisID: 'y',
}
The…
Tarek Hammami
- 840
- 9
- 12
1
vote
2 answers
Checking for date isWeekend for array of dates - Javascript
I would like to check which days are weekends in my array.
For now I only managed to check on single dates, and not the whole array at once.
If it is a weekend I would like to change the color on my barchart. Any help would be much…
Sindawg
- 13
- 2
1
vote
1 answer
How to properly scale large numbers in ChartJS/react-chartjs-2
I have a dataset with very big numbers (billion) and small numbers (millions). When I plot it on a horizontal bar chart the low number seem to almost disappear. I have tried different ways of scaling but still could not find a solution.
export const…
Tee
- 385
- 3
- 14
1
vote
1 answer
Integrate HTMLPlugin with react-chartjs-2 v4
I'm trying to use a custumized Label using a plugin with react-chartjs-2.
these are the versions I am using
"chart.js": "^3.9.1",
"react-chartjs-2": "^4.3.1",
"chartjs-plugin-datalabels": "^2.1.0",
Reproduction code error :…
Chiheb Hmida
- 11
- 4
1
vote
1 answer
Chart line not appearing in a semi log chart using chart.js
I am using react-chartjs-2 to create a semi log chart using some simple data.
I tried many examples but in the final chart the line isn't drawn nor I see any error in the browser console.
I am using Next.js & Tailwind CSS for this project.
I also…
ath j
- 347
- 2
- 12
1
vote
0 answers
custom y axis with react-chartjs-2 library and typscript
I am trying to do up a custom y-axis to convert 1 to a custom string. E.g. 1 is "Apple"
Been trying different solutions and none seems to work for the "scales" option. I doing its on react typescript.
Also, I am very confused about whether to use…
Samuel Wang
- 11
- 2
1
vote
1 answer
ChartJS adjusting Pie Chart Legend
I would like to adjust my ChartJS/React-chartjs-2 pie chart to show the legend evenly stacked on the side of the pie chart. I have attemped to manipulate options.legend.position but it doesnt seem to change. Below is a snippet of the code and a…
KontonAkumu
- 47
- 4
1
vote
1 answer
Chart js 2 on React update filtered data one step later
In my ReactJS application i need to display data in Graphs and i'm using chart-js-2 library.
In the dashboard i've implemented a Doughnut chart and Bar chart.
The graphs are initially populated using useEffect, but the data contained can be filtered…
64Bit1990
- 302
- 2
- 16