Mirrors/Chart.js
1
0
Fork 0
mirror of https://github.com/chartjs/Chart.js.git synced 2024-10-06 12:19:08 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update ticks.callback documentation (#8798)

Browse Source
This commit is contained in:
Jukka Kurkela 2021-04-03 16:34:57 +03:00
parent e4142d8d7b
commit 3257be9e43
1 changed files with 19 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docs/axes/labelling.md
View File

@ -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',
@ -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)