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

how to hide 0 value on Yaxis in Chart.js with negative values

I have create one bar chart with negative values using chart.js. Now i dont want to show 0 (zero) value on Y axis. I google lot of thing but there is no luck for me. i tried below properties as well. ticks: { beginAtZero: false …
CrazyDev
  • 157
  • 3
  • 12
3
votes
2 answers

ChartJS Doughnout Chart Pie Offset on Hover

I have this: Is it possible to animate one section of this chart, a Pie, on hover to make it grow, as in offset by either giving it padding or a different height? I think this should be possible because on their site it says " Animate everything!",…
Edgar Quintero
  • 4,223
  • 2
  • 34
  • 37
3
votes
1 answer

Animate datasets separately

I'm trying to display two datasets in a line graph but animating the second dataset some seconds after the first one. I'm using the CHART.JS version 2.6.0 and I saw a lot of samples using previous versions (1.xx), but all of them does not function…
David BS
  • 1,822
  • 1
  • 19
  • 35
3
votes
2 answers

Chart.js - How does it calculate Y-Axis on bar chart?

Can anyone show me the mathematical logic that Chart.js 2.6+ uses to calculate the Y-axis in a bar chart? I have created a pagination feature to allow me to page through a bar chart that has a massive amount of columns. It works great except that…
Phil
  • 4,029
  • 9
  • 62
  • 107
3
votes
1 answer

(Chart.js) web page doesn't display chart, no error in console

I'm new on chart.js and try to build something simple. I've not error in the console but chart doesn't display on my web page. I have no idea where it's from. It would be really great if somebody could help.
Kat
  • 161
  • 1
  • 4
  • 14
3
votes
2 answers

How do I change the colors on Y-Axis for values above, below zero? Chart.js 2.6

Using chart.js 2.6 Is there a way to dynamically change the bars in my chart for values above zero and below zero? The graph series data is being generated via a call to a method. Right now its just a random number generator but will be a DB call.…
Griff
  • 1,796
  • 3
  • 23
  • 48
3
votes
1 answer

How do I disable Label Text on Y-Axis but keep the gridlines in Chart.js 2.6?

Using Chart.js 2.6 trying to configure the graph to have grid lines but no labels on Y Axis. Here's my config options: var wowOptions = { scaleBeginAtZero: false, responsive: true, maintainAspectRatio: false, scaleStartValue: -50, …
Griff
  • 1,796
  • 3
  • 23
  • 48
3
votes
1 answer

Add mouseout event handler to legends in Chart.js

In the event of onHover of legends, I would like to change the style of the mouse cursor to pointer (yes, this can be done as the code shown below). But in the event of mouse out of legends, I would like to change the mouse cursor back to default.…
Yuci
  • 27,235
  • 10
  • 114
  • 113
3
votes
2 answers

chart.js v2 "right to left" tooltip (RTL)

I am using chart.js v2.5.0. My project requirement is that I use tooltips with "right-to-left" direction. How can I achieve this?
DUKEiLL
  • 199
  • 2
  • 6
  • 17
3
votes
1 answer

Chart.js stepSize is not working for Line chart for date

I'm plotting a line with Chart.js. I'm plotting time against some value. I want fix time slots on axis. I'm using the stepSize property, but it is not applying. Here is the code: var data = { labels: [1495015201000, 1495015202000, 1495015203000,…
Vishvesh Phadnis
  • 2,448
  • 5
  • 19
  • 35
3
votes
1 answer

Show all values in Chart.js v2 doughnut chart tooltip

I am using Chart.js v2.5.0. When a user hovers over the doughnut chart, I want the tooltip to show all values, like demostrated in the image below: This is the code I currently have: var ctx =…
DUKEiLL
  • 199
  • 2
  • 6
  • 17
3
votes
4 answers

Chart.js v2: space between doughnut inside doughnut

I am using chart.js v2.5.0. I put doughnut inside doughnut. I want the disdance between 2 doughnuts(A) to be larger without affecting the distance between slices inside the same doughnut(B). Please see the following image: Currently I am using the…
DUKEiLL
  • 199
  • 2
  • 6
  • 17
3
votes
2 answers

change date on x-axis dynamically

I have a chart, my x-axis is a timeline I need my timeline to change dynamically according to my data. for example: if the dates range (in my data) is big I need my axis to show months if the range is small then days. Ill try to make it clearer : I…
Damkulul
  • 1,406
  • 2
  • 25
  • 59
3
votes
1 answer

Fix the height of Y-Axis of Bar chart in chart.js?

Requirement: I am working with chart.js. In Bar chart, I want to fix the height of Y-Axis. Is there any attribute or hack to do this?
pro.animator
  • 33
  • 1
  • 1
  • 7
3
votes
0 answers

Way to group labels on chart.js?

Is there any way to group labels from legend on chart.js. Observe the current situation that I have: I want to group humidity labels, inside temperature and outside temperature. Where I will be able to show/hide them on single click. For instance…
Zeid Selimovic
  • 843
  • 3
  • 13
  • 19