Description of Chart.js scale concepts

[benmccann]

I'll send a PR to update the docs accordingly if you can fill me in on the right answers.

I would be helpful for the docs to define the concepts used in Chart.js:

• gridLines
• ticks
• labels

I don't understand how ticks and gridLines are different from each other or what they both are. I'm also unsure about the way these concepts inter-relate. E.g. does the number of data, ticks, labels, and gridLines all need to be equal?

[etimberg]

@benmccann great questions! and thanks for volunteering to update the docs!!!

The best way to describe these concepts is with an image

The text highlighted in red is the tick label. The purple box is the tick mark and the green box is the grid line. The grid line and the tick mark connect when the axis is immediately adjacent to the chart area, but in the case of multiple axes this does not have to be the case.

There should always be a label for each tick mark. For a category scale, numTicks === data.labels.length but for the other scale types, this is not the case and instead we generally autofit to the data and generate ticks afterwards at some reasonable intervals.

At the moment our internal scale object has a 1:1 mapping between ticks and grid lines, but in theory they can be different. For example, an axis may have major and minor ticks and only draw grid lines for the major tick marks but I didn't consider that case when writing a lot of the initial v2 code :'(

[benmccann]

The very first Chart.js issue I ever created 😄 I guess I didn't end up documenting it like I planned, but at least I did a lot of other stuff! Thanks for addressing!!