Questions tagged [chart.js2]

Chart.js is a JavaScript library for creating animated, interactive graphs for inclusion on web pages.

Chart.js2 is a updated and newer version of Chart.js.

See Official Version Documentation for a list of what's new in v2.5.0.

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

438 questions
7
votes
1 answer

ChartJS: get points information on hovering the points

I have successfully got the information by onClick function. But is there any method i can get the point information on Hovering over the point. Right now onHover as mentioned in docs is not working to get the point. This is my jsFiddle.
fat potato
  • 503
  • 1
  • 9
  • 29
7
votes
1 answer

Chart.js - Line charts with different colors for each border lines

As per chart.js documentation I can specify an Array for Colors of border and background. However on using this following configuration for chart.js. I am trying to figure out why array values for borderColor and backgroundColor are not working. I…
Jithin
  • 1,108
  • 2
  • 12
  • 26
7
votes
1 answer

Inline plugin doesn't work

According to the Chart.js docs, the following code should work: new Chart(document.getElementById(chartID), { type: 'pie', responsive: true, maintainAspectRatio: false, data: { labels: graph.globals.labels, datasets: [{ …
Skjal
  • 118
  • 1
  • 7
7
votes
2 answers

using array values in chart.js data and label field

I wish to pass values of an array to the data and label fields of the chart.js dataset. Here the code from success of ajax call made to fetch json data. I fetch the json data and store it into an array. Data = jQuery.parseJSON(result); var count =…
Salil Lambay
  • 109
  • 1
  • 1
  • 6
6
votes
4 answers

How to remove the Chart.js x Axis bottom line?

I am using Chart.js 2.8.0 trying to get rid of the X/Y axis border. With gridLines { showBorder: false }} I am still seeing the X axis border. I also have the color set to 0 alpha, all the other lines on X and Y are gone except for the bottom one on…
Sniffleh
  • 319
  • 3
  • 12
6
votes
1 answer

Wrong label value is displayed on point hover - Chart.JS

When you hover point on a Line chart tooltip displays wrong value of label from x-axis. I am using the latest version of Chart.JS 2.8.0 Here is the fiddle: https://jsfiddle.net/2mq1vt0o/ This is all data from displayed…
sebaoka
  • 119
  • 12
6
votes
1 answer

Chart.js getElementsAtEvent is returning empty array for line chart

We are using Chart.js 2.1.4 in a project we are working on. When trying to get the point where a line chart was clicked on, the getElementsAtEvent function is returning an empty Array. I understand this is expected behavior if the user clicks…
remnar
  • 61
  • 5
6
votes
4 answers

Chartjs 2: Multi level/hierarchical category axis in chartjs

Is it possible to define a bar chart with a multi level/category axis? For instance I'd like to display the Region/Province categories like in this Excel chart: I found this example using multiple xAxes. xAxes:[ { id:'xAxis1', …
Sebastien
  • 5,506
  • 4
  • 27
  • 37
6
votes
4 answers

Chart.js - Mouseover causes graphs to flicker and resize

To start, I have made a short video to show exactly what I'm running into. To summarize the video: while using Chart.js (2.6.0), I can create my charts without issue; but when I mouse-over the bars/points, the chart will resize its elements and…
Alex Gelinas
  • 147
  • 1
  • 10
6
votes
1 answer

Chart.JS Can not read property '_meta' of Undefined

I am attempting to build a basic bar chart, but I am getting the error in the title. I have used alert() to verify that the array I want to populate the chart with holds data, but something is still not fishing out properly with the syntax. Can…
IcyPopTarts
  • 494
  • 1
  • 12
  • 25
6
votes
2 answers

Chart.js - Setting max Y axis value and keeping steps correct

I'm using Chart.js 2.6. I have a chart to which I've added custom pagination to step through the dataset, as it is quite large. My pagination and everything works great, I simply grab the next chunk of data in my set and update the…
Phil
  • 4,029
  • 9
  • 62
  • 107
6
votes
1 answer

Chart.js remove stacking

I have a stacked bar chart and two line charts. The second line chart is beeing stacked on top of the first line chart but I don't want this behaviour. What I've tried is to explicitly set the stack mode on false ,but this option is not beeing…
djHonda
  • 81
  • 1
  • 9
6
votes
4 answers

Uncaught TypeError: Chart is not a constructor when using Chart.js

I'm working on my first Cordova projects and am trying to use Chart.js. The documentation states that Chart.js should be included like this: I installed the…
qwertz
  • 315
  • 1
  • 4
  • 14
6
votes
2 answers

Is it possible to combine two Y axes into a single tooltip with ChartJS 2?

Suppose I have two Y axes, labeled "foo" and "bar". These axes correspond to points along the same interval, e.g. weekly aggregates of foos and bars in say the last 12 weeks. Ideally you would mouseover one of these points along the line chart and…
maxcountryman
  • 1,562
  • 1
  • 24
  • 51
6
votes
5 answers

How to add padding to the vertical scale (X-axis) in Chart.js?

According to the "Tick Configuration" of Chart.js version 2.3 it is only possible to set a padding for the ticks on the Y-axis ("horizontal scale"): padding | Number |10 | Padding between the tick label and the axis. Note: Only applicable to…
lampshade
  • 2,470
  • 3
  • 36
  • 74
1 2
3
29 30