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-03-14 16:21:30 +01:00
| `padding` | [`Padding` ](../general/padding.md ) | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented.
2017-03-21 01:36:54 +01:00
## 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.
2020-10-13 00:06:07 +02:00
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
If the callback returns `null` or `undefined` the associated grid line will be hidden.
```javascript
var chart = new Chart(ctx, {
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
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.