2021-03-30 16:32:39 +02:00
# Labeling Axes
2017-03-21 01:36:54 +01:00
When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis.
## Scale Title Configuration
2021-03-06 05:22:55 +01:00
Namespace: `options.scales[scaleId].title` , it defines options for the scale title. Note that this only applies to cartesian axes.
2017-03-21 01:36:54 +01:00
| Name | Type | Default | Description
2019-01-29 13:34:16 +01:00
| ---- | ---- | ------- | -----------
| `display` | `boolean` | `false` | If true, display the axis title.
2019-10-27 21:36:08 +01:00
| `align` | `string` | `'center'` | Alignment of the axis title. Possible options are `'start'` , `'center'` and `'end'`
2021-03-06 16:18:32 +01:00
| `text` | `string` \|`string[]` | `''` | The text for the title. (i.e. "# of People" or "Response Choices").
2020-12-18 21:03:01 +01:00
| `color` | [`Color` ](../general/colors.md ) | `Chart.defaults.color` | Color of label.
| `font` | `Font` | `Chart.defaults.font` | See [Fonts ](../general/fonts.md )
2021-11-29 22:37:34 +01:00
| `padding` | [`Padding` ](../general/padding.md ) | `4` | Padding to apply around scale labels. Only `top` , `bottom` and `y` are implemented.
2017-03-21 01:36:54 +01:00
## Creating Custom Tick Formats
2021-04-03 15:34:57 +02:00
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.
2021-08-01 06:02:44 +02:00
The method receives 3 arguments:
2021-04-03 15:34:57 +02:00
* `value` - the tick value in the **internal data format** of the associated scale.
* `index` - the tick index in the ticks array.
2021-08-17 11:29:18 +02:00
* `ticks` - the array containing all of the [tick objects ](../api/interfaces/Tick ).
2021-04-03 15:34:57 +02:00
The call to the method is scoped to the scale. `this` inside the method is the scale object.
2017-03-21 01:36:54 +01:00
If the callback returns `null` or `undefined` the associated grid line will be hidden.
2021-04-03 15:34:57 +02:00
:::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.
2017-03-21 01:36:54 +01:00
```javascript
2021-10-13 20:51:33 +02:00
const chart = new Chart(ctx, {
2017-03-21 01:36:54 +01:00
type: 'line',
data: data,
options: {
scales: {
2019-11-22 00:46:49 +01:00
y: {
2017-03-21 01:36:54 +01:00
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
}
}
2019-11-22 00:46:49 +01:00
}
2017-03-21 01:36:54 +01:00
}
}
});
2017-06-08 19:58:11 +02:00
```
2019-04-02 09:45:34 +02:00
2021-04-03 15:34:57 +02:00
Related samples:
* [Tick configuration sample ](../samples/scale-options/ticks )