Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update ticks.callback documentation #8798

Merged
merged 1 commit into from Apr 3, 2021
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 19 additions & 3 deletions docs/axes/labelling.md
Expand Up @@ -17,11 +17,25 @@ Namespace: `options.scales[scaleId].title`, it defines options for the scale tit

## Creating Custom Tick Formats

It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$'). To do this, you need to override the `ticks.callback` method in the axis configuration.
In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.
It is also common to want to change the tick marks to include information about the data type. For example, adding a dollar sign ('$').
To do this, you need to override the `ticks.callback` method in the axis configuration.

The method receiver 3 arguments:

* `value` - the tick value in the **internal data format** of the associated scale.
* `index` - the tick index in the ticks array.
* `ticks` - the array containing all of the [tick objects](../api/interfaces/tick).

The call to the method is scoped to the scale. `this` inside the method is the scale object.

If the callback returns `null` or `undefined` the associated grid line will be hidden.

:::tip
The [category axis](../axes/cartesian/category), which is the default x-axis for line and bar charts, uses the `index` as internal data format. For accessing the label, use `this.getLabelForValue(value)`. [API: getLabelForValue](../api/classes/scale.html#getlabelforvalue)
:::

In the following example, every label of the Y-axis would be displayed with a dollar sign at the front.

```javascript
var chart = new Chart(ctx, {
type: 'line',
Expand All @@ -41,4 +55,6 @@ var chart = new Chart(ctx, {
});
```

The third parameter passed to the callback function is an array of labels, but in the time scale, it is an array of `{label: string, major: boolean}` objects.
Related samples:

* [Tick configuration sample](../samples/scale-options/ticks)