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
31
votes
5 answers

TimeSeries scale in ChartJS 3.0.2. brings error "This method is not implemented: either no adapter can be found or an incomplete integration was ..."

I upgraded to the newest Chart.JS version 3.0.2. and I'm trying to get a time series chart to render. Here is my config: { type: 'line', data: { datasets: [{ data: dataForChart }] }, options: { scales: { x: { …
Alexander Peiniger
  • 319
  • 1
  • 3
  • 4
25
votes
5 answers

Utils package in Chart.js

I'm trying reproducing this example from chart.js documentation: https://www.chartjs.org/docs/latest/samples/line/interpolation.html But I keep getting this error: Uncaught ReferenceError: Utils is not defined I tried searching for "Utils" in…
jma-bid
  • 253
  • 1
  • 3
  • 6
22
votes
3 answers

Chart.js - Where do I find which components should be registered?

I'm new to Chart.js, saw the v3 doc: Chart.js 3 is tree-shakeable, so it is necessary to import and register the controllers, elements, scales, and plugins you are going to use. I'm wondering where do I find these things for registering, for…
Wenfang Du
  • 8,804
  • 9
  • 59
  • 90
10
votes
1 answer

Line graph with linear timescale in Chart.js

I'm trying to use Chart.js 3.3.2 to display some a line graph with an equally spaced x date axis. Like the example they give here. I cannot get a simple version of this example working (see below snippet) as it outputs the error: Error: This method…
Jonathan Woollett-light
  • 2,813
  • 5
  • 30
  • 58
8
votes
2 answers

Chartjs Datasets overlapping and z-index

I have the below Chart implemented using chart.js version 3.x. https://jsfiddle.net/Lxya0u98/12/ I have multiple datasets in my charts to achieve the behavior I want. I am facing an issue with the datasets overlapping. In the chart, I have end of…
User7723337
  • 11,857
  • 27
  • 101
  • 182
6
votes
1 answer

Usage of ChartJS v3 with TypeScript and Webpack

Up until release 2.9.4, I used ChartJS in combination with @types/chart.js to get all the types for TypeScript support. My working minimal example with Webpack and TypeScript looks as follows: package.json: { "devDependencies": { …
user7390973
  • 63
  • 1
  • 6
6
votes
2 answers

Chartjs hide dataset legend v3

My current graphs on the webpage are powered by Chart.js v2.5.3. Charts that were configured a while ago works perfectly fine. Here is the code: var ctw = document.getElementById("chart-budget"); var myChart = new Chart(ctw, { type: 'bar', data:…
Kuba
  • 161
  • 2
  • 7
5
votes
2 answers

Using chart js version 3, how to add custom data to external tooltip?

Using Chart JS version 3. How do you pass in custom data that can be used by the external tooltip? I want to recreate this tooltip in HTML. I'm following the example "#External (Custom) Tooltips" on this page:…
Rodney Hickman
  • 3,133
  • 11
  • 53
  • 83
5
votes
1 answer

Add beforeDraw callback on chart JS v3

I'm trying to build a bar chart with custom caret and position on Char JS 3.3.2. I just added beforeDraw callback in plugin but it's not called ever. plugins: { beforeDraw: () => { console.log('before Draw!!!!'); }, legend: { display:…
Sungjoon Won
  • 51
  • 1
  • 3
5
votes
1 answer

How to reach Chart.helpers.color in a React context with chart.js 3.0.0?

I've managed to figure out how to import and register models for the new chart.js 3.0.0 in a React app, but I'm at a loss as to how to get Chart.helpers.color to be used. Here are my imports and register: import React from 'react'; import { Chart,…
Sam Hokin
  • 660
  • 1
  • 6
  • 15
4
votes
1 answer

What happened to generateLegend() in chartjs 3.0?

My understanding is that it has been depreciated in version 3.0. Is there a alternate method to easily accomplish customization of the legend?
BR549
  • 41
  • 2
3
votes
1 answer

Min/max ticks of bar graph are not placed at the bottom/top of axis

I'm trying to set max/min for y-axis in my horizontal bar graph. The result (image/pen below) shows that setting min/max for y-axis works but the ticks of min/max are not placed at the start/end of y-axis. As you can see, my min/max are 1450/1810…
Hoai Nguyen
  • 31
  • 3
3
votes
1 answer

Datalabels not showing on Chart.js

I am trying to display the total amount at the top of my chart.js; I'm trying to use the datalabel plugin but I'm not sure why it is not showing the labels, I don't get any errors, here's my code:
Riquelmy Melara
  • 849
  • 2
  • 11
  • 28
3
votes
0 answers

How to animate plugins with the default animation options with ChartJS 3?

So I have a plugin that does a custom drawing after the event "afterDraw". I'd like to be able hide the drawing by overriding the legend box onClick method and animating the hiding part using the charts default animation options. Is there any…
azidninja
  • 41
  • 2
2
votes
2 answers

Chart.js: How do I increase the gap between lines in a multiline chart?

I am using v 3.8 of Chart.js library and the below is the code: function createLineGraph(chartObject,chartId,data,labels,xLabel,yLabel) { // Create a new Chart.js instance var ctx = document.getElementById(chartId).getContext('2d'); …
Volatil3
  • 14,253
  • 38
  • 134
  • 263
1
2 3 4 5 6 7 8