| commit | author | age | ||
| 83c3f6 | 1 | # Labeling Axes |
| SP | 2 | |
| 3 | When creating a chart, you want to tell the viewer what data they are viewing. To do this, you need to label the axis. | |
| 4 | ||
| 5 | ## Scale Title Configuration | |
| 6 | ||
| 7 | The scale label configuration is nested under the scale configuration in the `scaleLabel` key. It defines options for the scale title. Note that this only applies to cartesian axes. | |
| 8 | ||
| 9 | | Name | Type | Default | Description | |
| 10 | | -----| ---- | --------| ----------- | |
| 11 | | `display` | `Boolean` | `false` | If true, display the axis title. | |
| 12 | | `labelString` | `String` | `''` | The text for the title. (i.e. "# of People" or "Response Choices"). | |
| 13 | | `lineHeight` | `Number/String` | `1.2` | Height of an individual line of text (see [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height)) | |
| 14 | | `fontColor` | `Color` | `'#666'` | Font color for scale title. | |
| 15 | | `fontFamily` | `String` | `"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"` | Font family for the scale title, follows CSS font-family options. | |
| 16 | | `fontSize` | `Number` | `12` | Font size for scale title. | |
| 17 | | `fontStyle` | `String` | `'normal'` | Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). | |
| 18 | | `padding` | `Number/Object` | `4` | Padding to apply around scale labels. Only `top` and `bottom` are implemented. | |
| 19 | ||
| 20 | ## Creating Custom Tick Formats | |
| 21 | ||
| 22 | 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. | |
| 23 | In the following example, every label of the Y axis would be displayed with a dollar sign at the front.. | |
| 24 | ||
| 25 | If the callback returns `null` or `undefined` the associated grid line will be hidden. | |
| 26 | ||
| 27 | ```javascript | |
| 28 | var chart = new Chart(ctx, { | |
| 29 | type: 'line', | |
| 30 | data: data, | |
| 31 | options: { | |
| 32 | scales: { | |
| 33 | yAxes: [{ | |
| 34 | ticks: { | |
| 35 | // Include a dollar sign in the ticks | |
| 36 | callback: function(value, index, values) { | |
| 37 | return '$' + value; | |
| 38 | } | |
| 39 | } | |
| 40 | }] | |
| 41 | } | |
| 42 | } | |
| 43 | }); | |
| 44 | ``` | |
