Questions tagged [react-chartjs-2]
452 questions
0
votes
1 answer
How do I separately render two Line graphs in one canvas using React Chart.js to make use of the useMemo-Hook?
I'm having trouble with a graph I'm building with React-ChartJS-2:
I've got two line charts in one canvas, one of them is interactive (the user can activate points and can compare different values on that graph) the other one is just a static graph…
0
votes
0 answers
Unable to install React-chartjs-2 in React Parcel Project
Very simply by using the following command, I am unable to install React-chartJs-2 module in my React Parcel project:
npm install --save chart.js react-chartjs-2
After the installation when i started my project using (npm start), i getting the…
Code Lover
- 723
- 1
- 10
- 24
0
votes
1 answer
How to use HTML for labels in react-chartjs?
I have the following code:
const historicDate = ['${day}
${time}', /* many more... */]
${time}', /* many more... */]
Anthony Luzquiños
- 739
- 11
- 23
0
votes
0 answers
NextJS get SyntaxError Unexpected token '=' with chart.js
I am using nextJS 14 with chart.js ^4.1.1 and react-chartjs-2 ^5.1.0
import {
BarElement,
CategoryScale,
Chart as ChartJS,
Legend,
LinearScale,
Title,
Tooltip,
} from 'chart.js'
ChartJS.register(CategoryScale,…
Ding Yau
- 1
- 1
0
votes
0 answers
React-Chartjs-2: How do I add gradients in the doughnut chart?
I want to create this:
Aspiration
So far, I have managed to create this:
crap
I want to move the color label descriptions that are appearing above the chart to the left side.
Here's my code:
const data = {
datasets: [
{
data: [20,…
emma
- 11
- 3
0
votes
0 answers
react-chartjs-2 BAR GRAPH resulting in hundreds of pages when printing to PDF
you can see here 722 pages are showing for pdf while i have created a single bar graph which is on one page
I am trying to create a Dashboard for client with pie charts, line bar graphs. I wanted to convert that dashboard inclusive of pie charts,…
mahadev Deshmukh
- 1
- 1
0
votes
1 answer
My react-chartjs-2 components are not working and are breaking my app
I have seen many questions related to this issue on Stack Overflow but all them use react-chartjs-2 and chart.js together. I am only using react-chartjs-2 without chart.js (As I am following a MERN ecommerce course on YouTube.)
The problem is that…
MegaMindTheCoder
- 125
- 3
- 12
0
votes
0 answers
bar charts with rounded bottom react chart js
I am trying to implement a bar chart using react chartjs and chartjs 2 my data to bar chart looks like this
dataSetCurrencies = {
labels: ['₹', '$', '€', '£'],
datasets: [
{
label: 'Dataset',
data: [512364, 820847,…
bugsmasher
- 153
- 6
0
votes
0 answers
Can't map firebase data to react-chartjs2
I am trying to map firebase data to a chart using react-chartjs-2 but it won't work. The labels are only supposed to be the titles. The chart should count the amount of incomplete tasks for a scope. So the y-axis is the count of incomplete tasks and…
Yash Ghela
- 1
- 1
0
votes
1 answer
Hide grids in Bar Graph
import React from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend
} from 'chart.js';
import { Bar } from 'react-chartjs-2';
ChartJS.register(
CategoryScale,
…
Ashu Agrawal
- 3
- 3
0
votes
0 answers
While using
{!historicalData ?
(
0
votes
1 answer
React react-chartjs-2 adding x and y axis labels to a line graph
import React from "react";
import { Line } from "react-chartjs-2";
// "chart.js": "^2.9.4",
// "react-chartjs-2": "^2.11.1"
const ext_data = [11, 19, 3, 5, 2, 3, 14, 19];
const ll = Array.from(Array(ext_data.length).keys());
const data = {
…
Cindy Burker
- 117
- 9
0
votes
0 answers
Can we disable the segments other than the one which is active in doughnut chart ? or can we make the segments look disabled? (Chart Js)
I want the segments go disabled other than the one which is active in doughnut chart. Is there any option to achieve it ?
I have tried using hidden, But it seems it is hiding whole chart. my expectation should like below
at the initial stage chart…
indhu
- 91
- 7
0
votes
0 answers
How to stop creating new instances when returning to the page?
Currently I am creating my bar graph like so.
return (
...
TheKents
- 1
- 1
0
votes
0 answers
how can i limit the X axis length when i have more labels in react-charts2.js?
my environment: React with React-charts2
I want to limit the labels number when i have more labels, example: 1 year total range
This screen is that the date length is thirty days, and the limit rule is that three days are replaced by one field, how…
Michael Luo
- 13
- 4