Questions tagged [react-chartjs-2]
The react-chartjs-2 tag has no usage guidance.
391
questions
0
votes
0
answers
10
views
Setting Custom Tick Values and Spacing in ChartJS
I am currently trying to build a bar chart with a large tail end of small values that are barely legible. I would like to create a custom set of ticks with even spacing between them so that the tail ...
1
vote
0
answers
15
views
How can I prevent component rendering in react-chartjs-2 and chart.js 4.2.1 to optimize performance and ux
I'm struggling with the react-chartjs-2 component nested within a parent component. Whenever I set the useEffect or useState in another component, the chart flickers and undergoes excessive re-...
0
votes
1
answer
57
views
Chart.js + React: How to create a custom label with amount and percentage
I'm using React, TypeScript and react-chartjs-2. I need to create a custom label for my pie chart that shows the label name, amount of data and percentage. I want it to look like this:
Orange
10 / 50%
...
0
votes
1
answer
20
views
(react-chartjs-2 | NextJS | typescript | bar chart ) TypeError: Cannot read properties of undefined (reading 'map')
I am running into an error where the console is throwing an error of TypeError: Cannot read properties of undefined (reading 'map') I am new to NextJS & Typescript and I am trying to create a ...
-1
votes
0
answers
38
views
Set goals with bars in React-chartjs-2
I am trying to set a horizontal goal line on every bar using react-chartjs-2, just like how shown below.
How should I do it?
0
votes
0
answers
45
views
Javascript problem: React,ChartJs ,Express, Node, Render Data from Database into a Line Chart.js? Not sure why?
import React, { Component } from "react";
import { Line } from "react-chartjs-2";
import {Chart as ChartJS, LineElement, CategoryScale, LinearScale, PointElement, Legend} from '...
0
votes
1
answer
34
views
ChartJS remove hover halo / shadow in doughnut chart
I have a customized doughnut chart done in ChartJS and the default hover behaviour is to change color of the hovered arc and show gray halo behind it.
I would like to remove the halo effect, but still ...
0
votes
1
answer
38
views
Word cloud/tag chartJS TSX Expanding/moving
I have implemented the worldcloud of this form: [https://www.npmjs.com/package/chartjs-chart-wordcloud] in a tsx project. The cloud is implemented and mostly doing fine. I have useEffect on the chart, ...
0
votes
0
answers
11
views
how i can achieve shadow on chart? version 2.7.4
I tried to accomplish adding a new chart type: so i can add a shadow
import { Chart } from 'chart.js';
// eslint-disable-next-line import/prefer-default-export
export const ShadowLineElement = Chart....
0
votes
0
answers
31
views
How can I achieve this kind of behavior?
I want to display these 2 lines on the chart, and the black line should stop like that and don't propagate to 2024
These are the data for each line, the first one:
"fairValues": [
...
0
votes
0
answers
20
views
How to add text beside legend of doughnut chart using react-chartjs-2 [duplicate]
I want to add some number text on the right of legend of doughnut chart using react-chartjs-2 like this image
How can i achive this?
0
votes
1
answer
133
views
How to add data labels in Doughnut Chart in react-chartjs-2?
I want to add data label in the doughnut chart.I have attached a screenshot as i want the required the output.
0
votes
0
answers
21
views
chart.js time is not a registered scale [duplicate]
I am building a stock trading app, and trying to calculate a users total portfolio value over time to display it in a dashboard using react-chartjs-2:
Here's my nosql data:
// stocks array
const ...
0
votes
1
answer
62
views
ReactJS ChartJS, data changes when user clicked the button
I am stuck in a case where the user wants dynamic data changes in the bar chart upon clicking on a tree menu.
The flow is as follows:
When the user has just logged in and opened the building page, the ...
0
votes
0
answers
24
views
Add a ₹ symbol in the beginning of each data set element in chart js bar chart
I have a react chart js with the following labels and data set fields
labels= [
"Mon",
"Tue",
"Wed",
"Thu",
...
1
vote
1
answer
60
views
Disable y-axis scaling when zooming with react-chartjs-2
Is there a way to disable the auto scaling of y-axis when I'm zooming on a time series chart ?
You can observe the behavior here : https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh
When ...
0
votes
0
answers
36
views
How to specify transition animations for show and hide react-chartjs-2
I am having trouble editing the show and hide transition animation options. The documentation for this part of the animations section on chartjs is lacking. I want full control of the show and hide ...
0
votes
0
answers
30
views
Missing class properties transform, error when using react-chartjs-2
I want using chart.js in react js
After install package and import to project, i am facing this error:
.../node_modules/chart.js/dist/chart.js: Missing class properties transform
class ...
0
votes
0
answers
56
views
Chart.js tooltip shows only parts of items in the labels on hover
I'm trying to make a Pie Chart using chart.js and react-chartjs-2, but when it is hovered, the tooltip for 'B Trans' and 'B QC' also shows the label of 'A Trans' and 'A QC' each in the first line as ...
0
votes
0
answers
38
views
reactjs chartjs change data when user clicked
I want to ask about changing data on a bar chart when the user clicks a button or tree menu.
So I have a useState to store provinsi, kota, kelurahan and kecamatan =
const [dataProvinsi, ...
0
votes
1
answer
19
views
How to make ticks distance fixed in a logarithmic line chart
I'm using chart.js for a project and I want to make distance between ticks fixed
I tried to read the docs but didn't find what I was looking for.
0
votes
0
answers
10
views
Forwarding multiple refs of conditionally-rendered child components in React.js
The Problem
I'm quite new to React, so forgive me if this problem is solved trivially. I'm trying to create a data panel in my React app containing both a Chart.js chart as well as a leaderboard, ...
0
votes
0
answers
79
views
ReactJS chartjs changes data every time it is clicked
here I want to ask about chartjs.
So, I have a case where there is a user who wants to change the data in the Bar Chart.
When the user clicks on the data in the tree menu, the data in the bar chart ...
0
votes
1
answer
102
views
How to add a title in Doughnut chart chart.js React
I want to add a Title for the Doughnut chart in my React app but for some reason it doesn't work. I have this code:
const chartData = {
labels: [],
datasets: [{
data: [],
...
0
votes
0
answers
18
views
options in Doughnut Chart error: Uncaught TypeError: Cannot read properties of undefined React
I use Doughnut chart form chart.js in React.
This code give me the error.
renderDoughnutChart(data, label) {
const chartData = {
labels: [],
datasets: [{
label: 'My First ...
2
votes
1
answer
95
views
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 ...
0
votes
0
answers
46
views
Uncaught TypeError: Cannot read properties of undefined (reading 'configMerge') Mapping a data in react
I am mapping an object in to pass the content/data to my Line. Chart.js
This code will give me the error(There are instances that a data in the array is undefined)
data.forEach((value) => {
if(...
3
votes
2
answers
114
views
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,
...
0
votes
1
answer
204
views
Cannot read properties of undefined (reading 'register') chart.js
I just upgraded chart.js at v4.1 and react-chartjs-2 at v5.1, in order to use react 18, in my components library. After I installed my version which includes the updated packages, I get the following ...
0
votes
0
answers
41
views
Only title is not updated in react-chartjs-2 doughnut chart
I am using react-chartjs-2 to implement a doughnut chart in my website.
Below is the code I am using to render the chart.
const Doughnut = (props) => {
const { title, labels, colors, projects, ...
0
votes
1
answer
53
views
Is it possible to display in a chart the axis in reverse, from example the x axis from right to left and the y from left to right? React-chart-js
I am trying to reverse the axis in a chart,what i want is to have to line of the chart running from left to right and the date.now() from right to left? How can i accomplish that?
I have tried to do x:...
0
votes
0
answers
46
views
react-chartjs-2 adding axes title to y axes for 2 axes line chart with 3 datasets
hi i have a question on adding title to axes for line chart. i am current using react-chartjs-2 and chart.js v4.2 . i have a line chart with 3 different datasets and i want two y axes. this is my ...
1
vote
1
answer
138
views
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,
...
0
votes
1
answer
65
views
text on Doughnut react-chartjs-2
how i can write on a Doughnut in react-chartjs-2,, all the answers show how to write in the middle of a Doughnut and not on the Doughnut,attaching a picture:
0
votes
1
answer
87
views
ChartJS Graph Label Errors
I am trying to use ChartJS, and as I have created my graph, I am seeing my labels be stacked on top of each other on the X-axis. As you can see in this graph image.
Originally, the X axis was supposed ...
2
votes
2
answers
86
views
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 ...
2
votes
1
answer
233
views
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 ...
0
votes
0
answers
59
views
Focus on the chart tooltip when clicking with the cursor when hovering
What i got
Hello, I need to make it so that when you click on a column (bar) of a graph, focus on its tooltip with the color of that column highlighted, as happens with events: ['click']. I tried ...
0
votes
2
answers
110
views
Create the Mixed Chart in react
I want to create the chart mixed chart with line and bar like the below image.
2
votes
1
answer
181
views
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 ...
1
vote
0
answers
80
views
Couldn't read property from data received from websocket?
I tried to add curves to visualise data from a python program connected to the app.js program via a websocket. The data is well retrieved through the websocket as it is continuously displayed in the ...
0
votes
2
answers
64
views
React-chartjs-2: Cannot read properties of undefined (reading 'register')
I am trying to implement chartjs using react-chartjs-2 but encountered the following error. I am using the following versions:
"chart.js": "^4.1.2",
"react-chartjs-2": &...
0
votes
0
answers
42
views
The right version of chartjs, react-chartjs-2 and chartjs-plugin-streaming
I am trying to plot a chart in real time using react-chartjs-2
i am using react version 18.2.0, i have installed:
chart.js version 2.9.3
chartjs-plugin-streaming version 1.9.0
but i can not install ...
0
votes
0
answers
38
views
Reduce spacing between two x axes
I am trying to produce a graph with an x axis that has two values on each tick. One is a percentage and the other is an absolute. I can do this quite easily by passing in a tuple array into the labels ...
0
votes
1
answer
55
views
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 ...
0
votes
1
answer
81
views
Image as a pointStyle with ChartJS in React
I'm using chartjs/react-chartjs-s to draw some plots in React/NextJS. I want to use an image for the pointStyle for one plot in specific. In plain JavaScript, an image can be created using const i = ...
0
votes
0
answers
57
views
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 ...
2
votes
2
answers
383
views
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 ...
1
vote
0
answers
124
views
How to prevent overlapping in react-chartjs-2 and make chart bar scrollable?
I am trying to draw a bar chart using react-chartjs-2, i am using typescript
because i have a big amount of data, there is overlapping in the chart, i want to prevent overlapping, instead of that, i ...
0
votes
1
answer
132
views
How to use HTML for labels in react-chartjs?
I have the following code:
const historicDate = ['<span>${day}<br/>${time}</span>', /* many more... */]
<Line
options={{
responsive: true,
plugins: {
legend: {
...