Questions tagged [react-chartjs-2]

The tag has no usage guidance.

Filter by
Sorted by
Tagged with
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
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-...
  • 33
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% ...
  • 29
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 ...
  • 45
-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, ...
  • 1
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 ...
  • 3,286
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 ...
  • 35
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.
  • 1
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, ...
  • 1
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: [], ...
  • 59
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 ...
  • 59
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 ...
  • 146
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(...
  • 59
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 ...
  • 1
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:
  • 1
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 ...
  • 245
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 ...
  • 23
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 ...
  • 245
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 ...
  • 245
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 = ...
  • 199
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: { ...

1
2 3 4 5
8