Labeling Axes
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
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.
| Name | Type | Default | Description |
|---|---|---|---|
display |
Boolean |
false |
If true, display the axis title. |
labelString |
String |
'' |
The text for the title. (i.e. "# of People" or "Response Choices"). |
lineHeight |
Number/String |
1.2 |
Height of an individual line of text (see MDN) |
fontColor |
Color |
'#666' |
Font color for scale title. |
fontFamily |
String |
"'Helvetica Neue',
'Helvetica', 'Arial',
sans-serif"
|
Font family for the scale title, follows CSS font-family options. |
fontSize |
Number |
12 |
Font size for scale title. |
fontStyle |
String |
'normal' |
Font style for the scale title, follows CSS font-style options (i.e. normal, italic, oblique, initial, inherit). |
padding |
Number/Object |
4 |
Padding to apply around scale labels. Only
top and bottom are
implemented.
|
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..
If the callback returns null or
undefined the associated grid line will be
hidden.
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
scales: {
yAxes: [{
ticks: {
// Include a dollar sign in the ticks
callback: function(value, index, values) {
return '$' + value;
}
}
}]
}
}
});