Cartesian configuration options

Cartesian grids are used in scatter, bubble, bar, and line charts, and contain two sets of scales, one for each perpendicular axis. They are configured in an object assigned to the options.scales property:

options: {
scales: {
xAxes: [{…}, ..., {…}], // array of x-axis objects
yAxes: [{…}, ..., {…}] // array of y-axis objects
}
}

You can have multiple axes of each type. They can be stacked, placed side by side, or positioned on opposite sides. Each axis may be linked to a specific dataset.

Polar area and radar charts use radial scales and configure a single options.scale property:

options: {
scale: {
{…} // axis object containing configuration for the radial axis
}
}

All axis configuration objects in Cartesian charts and the scale property in radial charts contain a display property, which receives a Boolean value (true or false), making it visible or not. The following code fragments hide all axes, grids and labels from a Cartesian chart and a radial chart:

options: { // configuration for a Cartesian chart
scales: { xAxes: [{display: false}], yAxes: [{display: false}] }
}
options: { // configuration for a radial chart
scale: { display: false }
}

The result is shown here. You can use this effect to create sparklines (small minimalistic visualizations). See the full code in Scales/scales-1-Cartesian-display.html and scales-2-radial-display.html:

A Cartesian chart and a radial chart with hidden axes, gridlines, and tick labels.
Code: Scales/scales-1-Cartesian-display.html and scales-2-radial-display.html

Axes also support more than a dozen callback functions that can be used to configure labels, ticks, and other data displayed by each axis.

..................Content has been hidden....................

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