Stack Overflow
Stack Overflow

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
1 answer

Chart js register new chart elements

In Chart js version 3.9 i am trying to register new custom PointElement. I made my CustomeElement in the following way: export default class CustomPointElement extends PointElement { draw(ctx: CanvasRenderingContext2D, area?: ChartArea) { …
tomer
  • 19
  • 1
  • 3
1
vote
0 answers

chart.js - I want the tooltip of the chart to be shown when a button is pressed

I made a donut chart in chart.js (3.9.1) using vue2. (In fact, I made it using primevue, but primevue says chart.js) I made as many buttons as the length of data in the data set, and when I mouse hover this button, I want the tooltip of the chart…
jwj
  • 11
  • 1
1
vote
1 answer

Avoiding explicit 'any' with Chart.js v3

We recently upgraded our Chart.JS library from v2 to v3, in part to make use of the new, integrated type annotations in our TypeScript code, however we've run into a number of issues where we've been forced to use an explicit "any" type cast in…
BioInfoBrett
  • 305
  • 1
  • 8
1
vote
1 answer

Chartjs: Moment and ChartJS Time Format Parsing

I need to make a bar chart using the time format, I started this one as a base but the library version is old and I need to use the new one but it is not working, can someone help me? Values must be in hours:minutes:second timeframe. here is the…
Rod
  • 57
  • 5
1
vote
1 answer

How can I draw a horizontal reference line in chart.js?

I want to draw a horizontal reference line at a particular value. The data is of the format: { "Close": 15638.8, "Date": "2022-06-21T10:00:00.000Z", "High": 15707.25, "Low": 15419.85, "Open": 15455.95, "Volume":…
user460567
  • 133
  • 9
1
vote
1 answer

How to create a line chart with two line, with one of them being filled, and the other staying on the foreground of the filled line?

I have the following chart: How can I make sure that the the blue line isn't filled, but at the same time, stays on top of the filled red line? Taking the line chart example from the documentation, I have tried playing around with the drawTime…
ryanzidago
  • 358
  • 2
  • 7
1
vote
1 answer

Chart.js - Pie chart calculate sum of visible values after legend click

Im using Chart.js to display a pie chart and its legend. When a user clicks on a legend label to disable\hide it I want to recalculate the sum total for all visible sections remaining in the pie chart. I have overridden the default Legend Click…
gisWeeper
  • 501
  • 6
  • 18
1
vote
2 answers

Changing line color below specific value in Chart.js

I am trying to color the line below a specific value a certain color. I am using Chart.js v3.7.1 I have implemented the solution found in this answer with partial success... let posColour= 'rgb(86,188,77)'; let negColour= 'rgb(229,66,66)'; let…
JoSSte
  • 2,953
  • 6
  • 34
  • 54
1
vote
1 answer

How to change x-Axes label position in Chart.js. x-Axes labels should be display inside of the chart instead of outside

Invision Image link here I am using Angular 13 and chart.js 3.7.1. I would like to have the x-axis labels should be moved beside the bar and inside the chart instead of displayed outside of the chart.
Naren
  • 51
  • 3
1
vote
1 answer

How to shift the origin along y-axis direction in a chart.js3 line chart, so that x-axis pass through a different point other than (0,0)?

I'm using chart.js to plot a dataset, which is a ratio of two variables and it ranges from 10 to -10. But most of the time it swings around y=1. I'm trying to plot a filled line plot of this dataset with the help of chart.js3. How do I change the …
LegionNexus
  • 13
  • 5
1
vote
0 answers

How to set fixed height for graph area in Chart.js

I need to create multiple charts, where the graph area is exactly the same height (but other chart element heights can vary). What kind of method could be used to achieve this functionality? By default Chart.js aims to fill the canvas height when…
schwarzenburger
  • 11
  • 1
1
vote
1 answer

chart.js remove lower grid from mixed chart

I have a mixed chart (scatter and line), hence I need 2 xAxis. There's an extra grid that appears on the bottom of the chart, because that's where the other x axis normally has its labels (I removed them because I don't need them) I'm trying to get…
Sergio
  • 658
  • 1
  • 9
  • 22
1
vote
0 answers

Legend does not appear while using chart.js in react

I am creating a sales chart by year using react chart.js. When the year button is clicked, the corresponding year data is brought from the server and the chart data is updated. However, the legend in the upper part seen in the chart.js linechart…
Sujin
  • 11
  • 3
1
vote
1 answer

How to display specific data range on my chart's dataset using Zoom and Pan on Chart.js 3.+?

I have a line chart for messages sent x day/month and I also have two datepickers on top of it. I want to be able to select a start date, an ending date and the chart reads those dates and display this exactly range of points. I already have zoom…
Guilherme Roque de Souza
  • 68
  • 6
1
vote
1 answer

Chartjs v3 overlap stacked bar chart with groups

I want to create stacked bar chart with groups in use chart.js v3. I my chart output I did it and i am getting the following image. But here, instead of the sum of label 1 and label2 appearing as 7000, how can I show the intersection of label 1 and…
user3176661
  • 13
  • 3
1 2
3
4 5 6 7 8