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 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.
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset