Questions tagged [chart.js3]

Chart.js 3.x is an updated and newer version of Chart.js.

Chart.js 3.x introduces a number of breaking changes. Major highlights of this version are listed in the 3.x Migration Guide.

For more information on Chart.js, check out the original tag.

112 questions
1
vote
0 answers

Stop rendering chart for which rendering is in progress

I have a Line chart for which data is contineously gets updated in batch of 5000 records. But at some random point I want to stop the currently in progress drawing and redraw the chart from very bigining. I have below code to clear the…
User7723337
  • 11,857
  • 27
  • 101
  • 182
1
vote
1 answer

Chart.js redraw chart for which rendering is in progress

I am using a chart.js 3.x JavaScript library for displaying charts. I need to update the chart for which rendering is in progress. I am using JavaScript Worker for updating the chart data. for (var index=0;index < myjson.length;index++) { …
User7723337
  • 11,857
  • 27
  • 101
  • 182
0
votes
1 answer

How to increase the line width when hovering the cursor in chart.js?

I know that I can change the width of the line and its points with borderWidth: 1, pointRadius: 1, it works fine. But how to increase the width of the line and its points when hovering the mouse cursor over a line? I tried hoverBorderWidth: 2,…
Neret
  • 143
  • 1
  • 8
0
votes
2 answers

How to fix Chart.js doughnut chart with missing background colors and missing labels when working with props?

I am using Chart.js in order to display a doughnut chart. I want to use props so that I could do some API calls and have different doughnut charts with various data showing up. My issue is that my code is not fully working. I have all the different…
KarljoY973
  • 13
  • 4
0
votes
3 answers

Is there a way with chart.js v4 to find out the default assigned colors per dataset by looking in the chart object in javascript?

Previously with chart.js v2, I could loop through the dataset object within the chart object and find out the default colors that were assigned. I then use these colors to color custom buttons elsewhere on my webpage. With chart.js v2 I could find…
gtl21
  • 1
  • 2
0
votes
1 answer

How to change bar-color on a chart.js bar graph

I have a bar chart using chart.js. I want to be able to change the color of the bar-chart (the value part). I've tried looking on the chart.js docs but I couldn't find anything.

Results

Tim J
  • 3
  • 1
0
votes
1 answer

Charjs: How to hide other lines on hover?

I am using Chart.js v3, below is the code but it is not hiding. The goal is that when I hover over a line, it hides other lines and their labels. The code is given below:
Volatil3
  • 14,253
  • 38
  • 134
  • 263
0
votes
0 answers

ChartJS 3 Doesn't Show Data Until A Legend Is Clicked

I get some data from back-end to show. When I inspect element with React Developer Tools, I can see that data is there but not shown in production. ChartJS version is 3.8, not react-chartjs I was having the same problem in development, too, but…
0
votes
2 answers

How can I adjust the width between 2 specific columns of bar chart of Chart.js?

How can I adjust the width between 2 specific columns of the bar chart of Chart.js? I want to distance certain 2 columns.
0
votes
0 answers

Chart.js v3 x-axis time series labels are not displaying properly

In Chart.js v2 when we have multiple data points for the same month we were able to display only one label month and skip remaining labels .but in v3 it is not supporting for each data point it is displaying label. Is there any capability or method…
0
votes
1 answer

custom legend hide() does not remove data labels

I am building a project using React with a doughnut and bar chart. Working with Chart.js 3.xx. I am trying to make my custom legend functional. I want to make data fractions disappear when the user clicks my legend items - like in the native legend,…
XanderTEM
  • 81
  • 10
0
votes
0 answers

Connect Chart.js animation progress with GSAP ScrollTrigger progress

Is it possible to connect Chart.js animation progress with GSAP ScrollTrigger progress? In Chart.js documentation there's a callback progress: I was wondering can we set chart.js animation progress depending on a ScrollTrigger progress? So inside…
0
votes
1 answer

How to use 2 different versions of chart.js in same html source tag

I've plots build with 2 different versions of chart.js. one is with 3.8.0 & other is with 2.8.0. So, I'm including both the versions in tags like this. #For plot1
user17993062
0
votes
1 answer

Chart.js How To Show Tooltip on Legend Hover

I am trying to show a tooltip with the graph data (label and y value) when the corresponding legend key is hovered over. I can only find solutions which work for older versions of Chart.js, I am using 3.8.0.
0
votes
1 answer

ChartJS v3.X - Limit the string size of label on canvas, without changing tooltip hover string

So, I had some old charts code using a very old Chart.js version 2.x but now due to the need of some functions only found on versions 3.x I'm updating a lot of code from the old charts on the website because a lot of the syntax changed between…
DKage
  • 170
  • 12