This tutorial will guide you through basic of Scales and GridLine object in chart.js 2.0+
In chart.js 2.0, you'll see that the the code automatically normalized the chart data so that the Y-axis scale begin with the lowest value of your data
This resulted in the chart of the lowest value disappeared!
To disable this feature, you'll need to change the scale option
You can change the scale option by overriding the scale object of your chart
Noted that the scale options are separately defined for each axis (xAxes and yAxes)
To disable the normalized scale, we need to change the "stacked" option of the Y-Axis to true
Now the Y-Axis will always starts with 0 instead of the lowest value
Now that you know how to override the scale object of your chart. you can experiment with all other fields in the scale object
The next topic is gridLines object inside scales object
gridLines defines the characteristic and properties of chart.js grid line
To change them, we need to override the gridLines object
For example, let's say if we want to hide a horizontal grid line
We'll need to override a gridLines.display of Y-Axis to false
You can also override the X-axis setting if you want to hide all the grid lines
Now you got the basic of the gridLines object. Let's try changing the grid line color
Hope this tutorial helps! Please like or subscribe to support us :)
