All Questions
Tagged with chart.js react-chartjs-2
319
questions
1
vote
1
answer
80
views
How to avoid chartjs line coming down when adding new value?
I’ve created a line chart in Chart.js that updates every second with new values. However, there's a small issue: when a new value is added, the animation starts from the bottom and moves up to the ...
- 27.3k
0
votes
0
answers
70
views
Chartjs Nextjs - Both the Two charts should display crosshair if hovered on any one
Two line charts should display crosshair if hovered on any one. When first chart is hovered crosshair is displayed on the first but on second chart only points are highlighted without the crosshair
...
0
votes
1
answer
104
views
React Chart.js is not rendering lines when state changes
I am using React Chart.js V2 and I am trying to update my chart when the state changes. However it is only rendering the y-labels on the left side and is not drawing the lines. The dataset and label ...
- 49
1
vote
1
answer
249
views
ChartJS Pie chart with react-chartjs-2 Legend align to the right error
I am trying to create a Pie chart in react using react-chartjs-2 and chartjs.
For that I'm using "chart.js": "^4.4.3", "react-chartjs-2": "^5.2.0"
The problem ...
0
votes
2
answers
151
views
How do I change the font of Chart.js/React-Chartjs-2 labels?
I have a Next.js personal website that I want to add features to. One of these features is a Chart using Chart.js + React-Chartjs-2. I use App Router.
The issue is that the fonts used in the chart ...
- 117
0
votes
2
answers
99
views
Prevent chart to resize due to long labels
i am using chart.js and react-chartjs-2. I have this polar chart and a dropdown at top left, as seen in the screenshots, they get resized due to long labels. when I give an empty array to display no ...
- 1,913
0
votes
3
answers
110
views
How to have two consecutive points in a line chart be in the same category?
I'm trying to create a line chart that can have up to two points in one category in chartjs. In the example, the labels and data are each passed as arrays, so each label can only have one point. I ...
- 36
0
votes
1
answer
87
views
Why is there a 1px gap between the background fill and the canvas edge in my Chart.js line chart?
I'm using Chart.js and react-to create a line chart, but I've noticed a small issue with the background fill. The line chart extends to the edges of the canvas as expected, but the background fill ...
- 447
0
votes
0
answers
116
views
How can I improve React Leaflet performance when rapidly updating a marker position?
I'm working on a page which reads GPX files (a series of lat/lon GPS points) and plots the route using React Leaflet as well as showing an elevation profile using react-chartjs-2.
When hovering over ...
- 1,330
1
vote
2
answers
287
views
How can I force a re-render react component Chart(react-chart.js) and update the custom plugin?
I made tooltips for all points using the plugin with two background colors dark and light. But the plugin works only after refreshing page. I made a code sandbox to show a problem. When you'll open ...
1
vote
0
answers
209
views
Chartjs line chart with tension not filling whole area?
I am using Chartjs(4.4.3) and react-chartjs-2(5.2.0) to show line chart in ui
I am having issue with area fill in line chart,
It is not filling completely for certain width
It happens only on latest ...
- 31
0
votes
1
answer
70
views
ChartJS: Property 'fit' does not exist on type 'LegendElement<"bar">'
Quick question:
I'm using ChartJS with react-chart-js2 and typescript.
I wanted to increase padding between legend and chart, and got to a solution that works, but I can't seem to get the types right.
...
- 313
0
votes
1
answer
122
views
React Chart Js 2 , x axes value not my value
i try formatting my x axis value in chart js
myData
const chartData = {
labels: data.map(item => item.toString()),
datasets: [
{
label: '',
...
1
vote
1
answer
145
views
Chart.js - X-axis not displaying dates with timestamps in format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (React chartjs-2)
I'm trying to create a line chart in React using chartjs-2 to visualize timestamps and their corresponding power measurements. My timestamps are in the format "YYYY-MM-DDTHH:mm:ss.SSSSSS" (...
0
votes
0
answers
124
views
Treeshaking is not there for chart.js npm
I'm using chart.js in my react-app but when I installed this package, I saw it has a single javascript bundle in the node_modules folder. When I used it in my app and bundled it using webpack, again ...
- 1
0
votes
0
answers
98
views
Pie Chart labels overlapping and getting clipped in react chart js 2
In the following code, the pie chart's labels are overlapping and clipping at the top. How can I prevent this?
For the following code, the labels that are used not only overlap but clip as well. How ...
- 1
0
votes
1
answer
92
views
Chartjs react initially hidden LegendItems
how can I set {hidden:true} on all LegendItems? If I set hidden property to true the legend item is only striked-through but the graph is still displayed. Any ideas?
Thank you!
I already tried this:
...
- 11
0
votes
0
answers
77
views
Left padding on right positioning legend in react-chartjs-2 line chart
I am using react-chartjs-2 line chart and assign legend position to right side but graph and legend does not containing the space. I want to provide left padding to my legend which create the space ...
0
votes
0
answers
76
views
How to remove another duplicate y axes grid in chart.js when adding yAxes title
Showing you an image to better understand my problem:
the first two image shows the result without yAxes scale configuration
my code without yAxes label configuration:
the result:
Now I want to add ...
- 125
0
votes
0
answers
77
views
Why does Chart.js render a diagonal line between the end point and beginning of a graph?
I have multiple chartjs line charts, all of them works great except for this one and I cant figure out what is wrong with it.
Here is a link to a video that shows the behavior of the graph.
And here ...
- 1,929
1
vote
1
answer
415
views
How to change offset of horizontal bars in react-chartjs-2
I have used following graph config to render graph:
{
type: 'horizontalBar',
indexAxis: 'y',
barThickness: 12,
scales: {
x: {
suggestedMax: 6,
suggestedMin: 0,
...
0
votes
0
answers
103
views
Can I apply DataLabel plug-in each graph in 'react-chartjs-2'?
I would like to apply labels differently for bar charts, pie charts, and line charts.
(I hope to show Bar graph show dataLabel only)
Is it possible using the plugin "https://chartjs-plugin-...
- 41
0
votes
0
answers
72
views
How to specify the number of labels to appear on the line of a line chart in react-chartjs-2
I have a line chart but I have no idea why a bunch of x,y corods are appearing on the line itself. Below is the code I believe needs to be modified:
datalabels: {
display: true,
...
- 3,698
1
vote
0
answers
100
views
Chart.js fill has poor rendering
Does anyone know how to stop chart js occasionally filling a chart like this:
It looks like there's rips or holes in the background area of the chart. It doesn't always happen. Everything on the ...
- 11
-1
votes
1
answer
113
views
Chartjs react horizontal bar chart change y axis labels to images
In this chart I want to replace the text labels "January", "February", etc. with images:
How can I do this with Chart.js and React chart js 2?
I cannot see this document in the ...
- 7,115
0
votes
0
answers
69
views
Line Chart - Plot range status tagging
I was doing some research to see if react-chartjs-2 gives you the ability to kind of flag or tag one or more plot points for the purposes of status change within our react application. The scenario is ...
0
votes
1
answer
224
views
How to split a charts in react-charts-js-2 into two sets of datasets
I was able to generate that split before a while back and I can't remember how I did it (hehe) I know how to plot the data for two sets of databases, but I am looking to split them visually so that ...
- 10.2k
0
votes
0
answers
78
views
Disable plugin in react-chartjs2?
I'm trying to dynamically enable and disable plugins rendered a react-chartjs-2 component.
The plugins that should be rendered are passed to the component like this:
import { useRef, useEffect } from '...
- 53
0
votes
0
answers
90
views
White screen in electron when using react-chartjs-2
I have this typical chart implementation of react-chartjs-2. Why is this not working in electron generated using Vite and with react with TypeScript (.tsx) as the front-end? The problem: I can't see ...
- 167
1
vote
0
answers
180
views
Button for enable or disable zoom and pan utils using chartjs, react-chartjs-2 and chartjs-plugin-zoom
Im trying to create a button for enable or disable zoom and pan options in my chart.
Part of my code
import { useRef, useState } from "react"
import { Line } from "react-chartjs-2"
...
- 11
1
vote
1
answer
239
views
How to make chartjs Tooltip scrollable?
I tried creating custom tooltip. The below code provides a tooltip with scrollbar, but unable to scroll through the tooltip. Not sure what I missed.
There is a callback function which provided a list ...
- 189
0
votes
0
answers
24
views
Changing neutral value from 0 to different number. | reract-chartjs-2
I´m trying to implement a Bar Chart with react-chartjs-2 in a web app.
It is possible to make a graph where values above zero head up and values below zero head down.
So far so good. But now i need to ...
1
vote
1
answer
271
views
React: chartjs nagative area different color
I using chartjs and react-chartjs-2 line chart for positive and negative value, for positive value I want the filled area is green, and negative area is red.
https://codesandbox.io/p/devbox/recursing-...
- 2,969
1
vote
0
answers
189
views
How to stop ChartJS / react-chartjs-2 from re-rendering new lines on plot
In my React App, I am adding new dataset lines to a chart. Here is the behavior I am encountering:
On App start, a chart renders with a single line [desirable]
When I mousedown on the chart, a second ...
- 11
0
votes
0
answers
224
views
Doughnut Cannot set properties of undefined (setting '_listened') and TypeError: Cannot read properties of undefined (reading '_labels')
So, as I get main problem is chart try to use labels form undefined object and can't find them - after that it gives error exception.
Also good question why it happens only when I reload the page and ...
1
vote
1
answer
413
views
How to sort datasets for each stacked bar chart using React Chart.js 2
I am currently unable to sort the datasets that shown in each stacked bars in descending order; they are currently displaying randomly.
Here is my current code
import React from 'react';
import {
...
0
votes
0
answers
27
views
'fill' option of 'line' chart in chart.js is not working [duplicate]
I use react-chartjs-2 to create a line chart with 4 datasets.
Currently the chart looks like this:
I want to fill the area between the 2 red lines (SMOOTH DATA MIN & SMOOT DATA MAX). I tried ...
- 2,600
0
votes
0
answers
143
views
How to implement x-axis scrolling in Chart.js version 2 for real-time data visualization in React.js?
I'm currently working on a real-time data visualization project using React.js and Chart.js version 2. I've successfully implemented a line chart to display real-time data, but I'm facing an issue ...
- 1
0
votes
0
answers
66
views
NextJS 13.4 app import 'chart.js/auto'; increase the bundle size
In my next app, following component used to display many charts. To working it fine I had to import chart.js/auto
Unless it gives following error
react-chartjs-2: Canvas is already in use. Chart with ...
- 3,463
1
vote
1
answer
218
views
How to remove point labels in react-chartjs-2 Line component?
I am working with the Line component from react-chartjs-2 and having trouble with removing labels on the points of the line.
Line Graph Result
Line Options:
const chartOptions: DeepPartial<
...
- 21
1
vote
0
answers
87
views
How to add these crooked lines and the value labels to a doughnut chart in react-chartjs2?
Image 01 is the one I need to make, while Image 02 is the one I've currently implemented. Notice the difference between the two. I need to implement the two crooked lines and the value labels ...
4
votes
4
answers
958
views
Chartjs plugin zoom Reference error: window is not defined
In Nextjs application while I'm run the command for build and export there was an ReferenceError
I've attached the screenshot for your reference..
When remove the import of chartjs-plugin-zoom from ...
1
vote
0
answers
226
views
Chartjs v4 Chart Title and Legends not showing
I have created a pie chart as follow
import React from 'react';
import { Pie } from 'react-chartjs-2';
import {Chart, ArcElement, Title, Legend} from 'chart.js'
Chart.register(ArcElement);
const ...
- 21
0
votes
1
answer
74
views
Line chart thickness to be Independent of the fill styling
I am using react-chartjs-2, Version: ^5.2.0
As you can see from the images, I am trying to apply a gradient fill on a line chart.
But the gradient styling is also applied on the line itself.
Is there ...
- 1,260
3
votes
1
answer
2k
views
Chart.js This method is not implemented: Check that a complete date adapter is provided. error with chartjs-adapter-date-fns included
Chart.js time line graph does not render, and instead throws an error when x axis is set to type: time as is noted in all the docs, note that I'm using 4.1.2 and react-chartjs-2 wrapper around chart....
- 639
0
votes
1
answer
109
views
react-chartjs2: How to hide the labels (not legend that appears on top) that appears OVER the graph line (not the x / y axis) in a Line Graph? [duplicate]
How I want the graph to look:
How it currently looks:
Code for the component:
function LineGraph() {
ChartJS.register(
CategoryScale,
LinearScale,
PointElement,
LineElement,
...
1
vote
0
answers
100
views
Is there any solution to position legend in chatjs without getting any error
Got the error whenever i switch the legend position from top to left or right.
code is given below:
the problem doesn't persist with the Line or Bar graph,the error occurs only for Doughnut graph.
...
- 11
1
vote
2
answers
408
views
Tooltip Display Issue on Small Screens with Chart.js & react-chartjs-2 - Works Fine on Larger Screens
I'm encountering a peculiar problem with tooltips when using Chart.js in conjunction with react-chartjs-2 in project. The issue specifically pertains to small screens, such as laptops and smaller, ...
- 697
1
vote
1
answer
486
views
Gradient color under Line Chart
I want to create this kind of color under a line chart.
I searched for a solution but can't find one that uses react-chart-js2. I want to do this without using the plugin.
- 17
0
votes
0
answers
60
views
Stacked bar chart showing row labels above other labels
I am build a chart where the rows are the assignees' names
and when I have too many assignees the chart just put one name above other (https://i.sstatic.net/LNk5A.png). I want to just add space ...
