460 questions
1
vote
1
answer
42
views
Custom sorting of bars within x-axis groups
I'm hoping someone has figured out how to properly sort "datasets" within their clusters in a ChartJS Bar chart. Below is an example of a bar chart in ChartJS with multiple "datasets&...
- 11
0
votes
0
answers
40
views
hide annotation when clicking legend toggle
I'm using the annotation plugin to show a vertical line on my graph.
const options = {
legend: {
position: 'bottom',
onClick: (e, legendItem, legend) => {
...
- 19
0
votes
0
answers
42
views
Chartjs is adding values which is not there in data
This is my code
import "chartjs-adapter-moment";
import LoacalLoader from "@components/Loaders/LocalLoader";
import Text from "@components/Text";
import {
CategoryScale,...
1
vote
2
answers
28
views
Get chart image but without rendering chart
I'm using react-chartjs-2 but I need to get chart only as image, without rendering it.
I can't render it because I need to print the image inside a PDF document (react-pdf); if I put the chart ...
- 79
0
votes
1
answer
46
views
ChartJS - Stacked Bar Chart, unable to trigger callback function for tooltips
I have a stacked bar chart, but I am unable to trigger the callback functions associated with the tooltip.
import Chart from "chart.js/auto";
import { Bar } from "react-chartjs-2";
...
- 19
0
votes
1
answer
48
views
Chartjs using react - create viewport that slides along x axis, where x axis has a hard minimum and maximum
I'm trying to create and control a viewport where you can scroll left or right on a chart in chartjs, but havent been having any luck. I need the min and max X values to be a hard stop on the panning ...
- 19
0
votes
0
answers
49
views
Chart.js 3.9.1 throws cannot read property of undefined reading prototype error in react
I am using React 16 and try to implement a sankey chart visualization with Chart.js.
Since Chart.js v4 requires Webpack 5 or some other Babel magic that I cannot really change in my clusterf**k of a ...
- 1
1
vote
1
answer
95
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.4k
0
votes
0
answers
81
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
0
answers
64
views
React Chart - Radar/Spider graph customization
I am using react radar chart, but I am unable to customized it, I refer so many stackoverflow content, but no luch,
I need to remove points from graph,
If label size is big, then it cuts from browser,
...
- 181
0
votes
0
answers
59
views
How to show the label values in each part of react-chartjs2 pie chart?
According to the image I have attached, I want to show the percentage or value of labels in the pie chart, but I couldn't find any option.
const options = {
plugins: {
legend: {
...
- 400
1
vote
0
answers
129
views
Horizontal line Bar chart (ReactJs)
I just want to ask for possible library that will result with this kind of chart. I can't seem to find any that matches this. Thank you for any suggestions that you can give.
enter image description ...
- 11
0
votes
1
answer
110
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
2
votes
1
answer
315
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
174
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
108
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,943
0
votes
3
answers
118
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
92
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
125
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
396
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
241
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
78
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.
...
- 312
0
votes
1
answer
126
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
164
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
63
views
Doughnut chart from chartjs2 is not population data from another component in React JS
In my project I am trying to use doughnut chart as a separate component. I am passing some values from a component to the doughnut chart component. It is not showing the correct chart. I am passing ...
- 1,183
0
votes
0
answers
137
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
105
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
0
answers
85
views
Integration ai model in chart.js in ReactJs
`I am integrating Ai model Citrus Disease Prediction .
I am facing issues that I am unable to get the values of model in the chartjs. Please guide me where I am doing wrong.
This is my Test component ...
- 1
0
votes
1
answer
101
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
165
views
How to make a bar chart in React Js with custom bar component?
I am trying to create a height comparison chart where I want to display the SVG's of kids, men and women based on height instead of bar. But, sometimes, my SVG does not appear completely on the chart ...
0
votes
0
answers
78
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
75
views
Using Chart.js library to draw a Line graph using coingeko api is not working properly
I got below error when I try implement a line chart
Canvas is already in use. Chart with ID '0' must be destroyed before the canvas with ID '' can be reused.
The code below is used visually to ...
- 1
0
votes
0
answers
93
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
79
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 ...
- 2,009
1
vote
1
answer
461
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
115
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
74
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,708
1
vote
0
answers
104
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
0
votes
1
answer
232
views
How can I change text color under Doughnut chart in react-chartjs-2
I am using the Doughnut from the react-chartjs-2 library and I would like to change the color only of the writings under the graph, I would like to put them in white since with this background they ...
- 37
0
votes
1
answer
184
views
react-chartjs-2 not rendering vertical arbitrary line using chartjs-plugin-annotation
I am trying to show a arbitrary vertical line in my Line Chart. In line chart on X-Axis there is timestamp and on Y-Axis some data point integer.
I want to an arbitrary vertical line in my Line Chart ...
- 397
-1
votes
1
answer
116
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,125
0
votes
0
answers
70
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
0
answers
78
views
React will only render a vertical line no matter how i change the data within the X & Y Axis
I'm following along to a Robinhood Clone tutorial on Youtube. On their version they we're able to change the direction of the line. Mine doesn't seem to budge whenever I change any of the data points. ...
3
votes
0
answers
336
views
How can I add a checkbox to a react chartjs Legend?
I would like to add a checkbox next to the Legend to enable/disable the dataset. It seems that all implementation examples I have seen completely overwrite the Legend, but I like it how it is. I ...
- 104
0
votes
1
answer
236
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
80
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
91
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
0
votes
1
answer
177
views
How can I customize an information bubble in React-chartjs2 when clicking a point?
Using the example from there site for a Line graph, it seems to support base information when hovering a point. Does anyone know how to customize this to using your own information? For example, in ...
- 104
1
vote
0
answers
192
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
278
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