All Questions
Tagged with chart.js react-chartjs
372
questions
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
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
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" (...
2
votes
1
answer
95
views
How do I make the line start at the middle instead of the beginning of the column?
I'm creating a line chart using chartjs (v3) (and react-chartjs to integrate) and I'm having some bad times to customize the line to start at the middle of the first column (and also finishes at the ...
- 67
2
votes
1
answer
68
views
ChartJS: Grouped Stacked Bar Chart rendering incorrectly
I am trying to use ChartJS to create a grouped stacked bar chart. In my dataset, there are 2 groups: Groups A and Groups B. Groups A are rendered out correctly, but for some reason, Groups B (gray ...
- 6,455
0
votes
0
answers
93
views
How to display the label text when we hover over the labels on X or Y axes?
I am currently working on a React project that is using ChartJS to generate charts based on the data gathered from the database. Recently I found an issue when the labels are too long,the chart will ...
- 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
2
votes
1
answer
635
views
ChartJS / react-chartjs-2 add horizontal reference line to bar chart
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright, nothing special:
I want to add a horizontal line to display the average of the years totals to see how ...
- 478
1
vote
1
answer
281
views
ChartJS / react-chartjs-2 divide bar in to two data points
I am creating a barchart with ChartJS / react-chartjs-2.
The barchart is displaying allright so far, nothing special:
My data looks like this:
{
Name: "De Regenboog",
...
- 478
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
22
views
Customize react-chartjs-2
My task is to create a chart with the following design using react-chartjs-2:
My current approach:
With options:
scales: {
x: {
ticks: {
maxTicksLimit: 8,
},
...
- 51
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
3
votes
1
answer
4k
views
Problem with chartjs and react-chartjs-2 in reactjs
I tried to draw a line chart with temperature data, humidity data and brightness data. I tried to downgrade the version of chartjs and react-chartjs-2 but it doesn't work
Here's my dependencies:
&...
- 51
0
votes
0
answers
59
views
Intermittent Chart.js 3.7.1 Graph Distortion on Load
I'm encountering an intermittent rendering issue with Chart.js (version 3.7.1) where the graph occasionally displays with distortions. This problem does not happen consistently; however, when it does, ...
- 11
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 ...
0
votes
1
answer
235
views
How to add icons next to datalabels?
React ChartJS: I'm creating a combined chart that has bars and a line. I want to display an arrow next to the line datalabels: if the value of the datalabel is bigger than the previous value then the ...
- 61
0
votes
1
answer
69
views
Reduce dimension of graph with react-chartjs-2 and chart.js
I'm having a problem. I'm trying to reduce the dimension of a chart (radial or spider, as you want to call it).
As is possible to see from the image here it takes too much space of the page.
I'm ...
- 21
1
vote
1
answer
666
views
Is it possible to create a brush chart with ChartJS?
Is it possible to create a brush chart as in this example using ChartJS and potentially plugins?
I’ve seen the zoom plugin https://www.chartjs.org/chartjs-plugin-zoom/latest/samples/drag/category....
- 4,088
2
votes
0
answers
141
views
getting typescript annotations error when adding annotations in react for chartjs [closed]
I am able to see the annotations on the graph. but typescript is throwing below error
Type '{ plugins: { annotation?: { annotations: { annotation: { type: string; scaleID: string; borderWidth: number; ...
- 923
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
1
vote
0
answers
18
views
Reac-ChartJs-2: Is there a way to show another chart on the tooltip by hovering over a line chart graph?
What would be the way to achieve something like the following feature using react-chartjs-2?
Would you recommend other libraries that could achieve the same?
- 135
1
vote
1
answer
503
views
Show annotations for BarGraph using PrimeReact with Chart.js
We use prime react in one of our project, and there was this need where we had to show a bar graph (histogram) in one of the page.
I have made the changes and it shows the graph, but above some bar ...
1
vote
2
answers
356
views
React Chart.js disabling interactivity for a single dataset
I'm currently working on a web application where I'm using Chart.js to display a line chart with multiple datasets. The chart contains two datasets, with the first dataset containing the main data ...
- 13
0
votes
1
answer
183
views
Chart.js how to align grouped bar chart correctly?
I have a grouped bar chart use case using Chart.js,
On the X axis I have Months,
On the Y axis, I have stacked bars divided by 2 digit Country codes,
For some reason the bars are not getting aligned ...
- 5,874
1
vote
3
answers
70
views
Not able to hide the (indicator) box which is next to the label in Line Graph
If there is no value in graph API response, then graph should not be plotted and also all the legends/label should be hidden
(Multiple y-axis)
When there is no value in y-axis, I am able to hide the ...
- 29
0
votes
1
answer
1k
views
react-chartjs-2 candlestick chart
How can I implement candlestick chart on react-chartjs-2? This is my code:
import "chartjs-chart-financial";
import React from "react";
import { Chart } from "react-chartjs-2&...
- 647
0
votes
1
answer
423
views
How to add a custom Arabic and Persian font to chart.js?
I'm currently working with react-chartjs-2. My goal is to apply a custom font, which I have loaded in my CSS, to the charts created with chartjs. I have read the documentation, and while there is a ...
- 1,622
0
votes
2
answers
2k
views
Chart.js displaying the text in center of the doughnut chart
I was trying to add implement the idea of placing text inside the pie chart and it doesn`t work as expected
import React,{useEffect, useState,useMemo} from 'react'
import { Chart as ChartJS, ...
- 47
0
votes
1
answer
423
views
The options don't work when creating my chart using chartjs (4.3.0) with react-chartjs-2 (5.2.0)
My bar chart is displayed with the correct data, but I can't change the text color on the 2 axes or the date formatting. It's like Options are not read.
I'm using React 18.2.0 and typescript 4.9.3.
...
0
votes
1
answer
725
views
ChartJS Bubble Chart - Control The Radius Pixel Size Based on Fixed Height Chart To Prevent Overly Large Bubbles
I understand in ChartJS, based on the documentation of the "radius" (found here: https://www.chartjs.org/docs/latest/charts/bubble.html#styling), that the "radius" controls the ...
- 133
0
votes
0
answers
1k
views
How to use plugins (beforeDraw) with react-chartjs-2.js and Typescript?
I would like to move the title of my doughnut chart inside of the doughnut. I checked that I can use beforeDraw for this like here: Add text inside the Doughnut chart of the React-Chartjs-2 box to ...
- 29
0
votes
0
answers
493
views
Chart.register is not a function error in chart.js
Whenever I am running my application locally it is running fine, but when building it as a component I get an error that says, Chart.register is not a function. Can someone please help.
My Code:
...
2
votes
0
answers
303
views
Chart.js Treemap plugin showing coordinate data in chart image rendered
I am creating a treemap using the plugin, and it is working fine except for the context.raw data being printed in the svg of rendered Chart.
Note that i have used single field so problem is easily ...
- 21
0
votes
1
answer
1k
views
How to increase hitbox size in ChartJS to trigger hover effects?
Make "hitbox" of bar higher in ChartJS.
On hovering above bar the bar should act as if i was hovering it - change color, show tooltip, etc.
I've tried to use 'chartjs-plugin-stacked100' to ...
- 1
0
votes
1
answer
612
views
How to change position and styling of Tooltip in React Chart.js?
I'm using line chart in my React Project. What I need to do is to customize the styling of tooltip and change its position. Currently it shows at the bottom left of the chart when hovered(although it ...
- 424
0
votes
1
answer
66
views
React ChartJS data with date on x-axis not rendering
Need to show data on chart with dates on x-axis
Here is the data:
const data = {
datasets: [
{
label: "Fe",
borderColor: "Red",
backgroundColor: ...
- 3,030
1
vote
0
answers
348
views
TypeScript giving error when using ChartDataLabels with Chartjs/react-chartjs-2
I'm using React Chartjs 2 along with ChartDataLabels for a PieChart and it's been working great. I've recently upgraded the the versions below and I'm getting the following error:
ChartDataLabels, ...
- 345
0
votes
1
answer
366
views
Update RectChart JS Options on Button Click
Trying to update React Chart JS options on button click using Chart.update() method. But its not working. Here is the code
import React, { useRef } from "react";
import { Chart } from "...
- 3,030
0
votes
0
answers
128
views
Chart js tooltip only being visible on the first data point
I'm using chart js in my next js website and have created a line chart the problem is when I hover on the data points the tooltip is supposed to show up.
But in my case only the first tooltip is ...
- 11
0
votes
1
answer
363
views
How to do a round tick marks in ChartJS?
Are there ways to make X axis tick marks round in ChartJS?
All I've managed so far is to make them into dashes, but that's not what I need.
The first screenshot is how I want it to look, the second is ...
- 1
1
vote
2
answers
118
views
How to hide grid lines in graphs in React chart js 2
I am using react-chartjs-2 version 5 and I want to hide the gridlines. I have tried this code snippet but did not work.
xAxes: [
{
display: false,
gridLines: {
display: false,
...
- 33
2
votes
0
answers
300
views
How to set filled color in react-chartjs-2 with gradient color
I am trying to fill the background color with the gradient color just like below image. I have tried multiple methods to achieve the gradient but failed in most of them.
This is what I have tried ...
- 269
1
vote
0
answers
144
views
Develop Sales Funnel UI using chartJS
We have been asked to implement this sales funnel wireframe now using chartJS instead of highcharts. We worked on the implementation and do not know how to make changes to make it look like the ...
1
vote
1
answer
788
views
How to get point coordinates in chart.js scatter plot?
I'm trying to fetch x- and y- coordinates from a chart.js scatter plot through a mouse click event in a react application.
Following this tutorial: https://react-chartjs-2.js.org/docs/working-with-...
- 53
2
votes
1
answer
934
views
How to change the color of a specific y-axis in Chart.js?
I'm working with Chart.js to create a line chart that displays two datasets with different y-axes. I want to change the color of one of the y-axes, The x-axis contains the no of tests which starts ...
- 3,610
0
votes
0
answers
120
views
React-ChartJS-2. Not Rendering in PDFViewer
I want to render the chart generated by the Bar component inside the PDFViewer but it is not working. It will display an error "Failed to create chart: can't acquire context from the given item &...
- 103
0
votes
1
answer
759
views
Chart.js - Line data on the chart do not match their dates
The data and dates for the white line in the chart you see below are as follows. As you can see here, for example, there is no data for March 9 - March 10 - March 11 and March 12. But since the white ...
1
vote
1
answer
3k
views
Chartjs with Nextjs - User input for plotting graph
I'm having a lot of trouble getting a user input to work for my chartjs graph in nextjs. The key issue I am having is that every time the dataset values change the whole graph redraws. This wouldn't ...
- 57
0
votes
2
answers
3k
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