Configuring axis titles

You can add a label or title for each axis in any Cartesian chart using the axis.scaleLabel property (for example, options.scales.xAxes[0].scaleLabel configures the title for the first x axis). The following table lists the configurable properties of a scaleLabel object:

Property	Value	Description
display	true or false (default)	Displays or hides the axis title
labelString	String (default is '')	The title for the axis
lineHeight	Number	Spacing above and below the text
fontColor, fontFamily, fontStyle	String	CSS font attributes
fontSize	Number	Font size in pixels
padding	Number	Spacing before and after the text

Scale label (scale title) configuration for Cartesian scales. These properties are used in any axis.scaleLabel object.

The following code fragment adds titles for the x and y axes of a bar chart that we created in Chapter 3, Chart.js – Quick Start. Note that it's not enough to just add axis.scaleLabel.labelString, you also have to set axis.scaleLabel.display: true, since the titles are hidden by default:

scales: {
     xAxes: [{
         scaleLabel: {
             display: true,
             labelString: "Oceans",
             fontSize: 16
         }
     }],
     yAxes: [{
         scaleLabel: {
             display: true,
             labelString: "Volume in cubic km",
             fontSize: 16
         }
     }]
 }

See the full code in Cartesian/Cartesian-3-scaleLabel.html. The result is shown as follows:

Axis titles added with the scaleLabel property. Code: Cartesian/Cartesian-3-scaleLabel.html.