axes

20 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Axes in cartesian vs radial charts

In cartesian charts, there are 1 or more X-axis and 1 or more Y-axis to map points onto the 2-dimensional canvas. In radial charts such as radar or polar area charts, there is a single axis that maps points in angular and radial directions.

Radial axes definition and use

Radial axes are used specifically for radar and polar area chart types. These axes overlay the chart area rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.

Radial axis visual components

A radial axis is composed of four visual components that can be individually configured: angle lines, grid lines, point labels, and ticks.

Angle lines on radial axes

Angle lines are grid lines for a radial axis that are drawn on the chart area. They stretch out from the center towards the edge of the canvas. Angle lines are configured in the scales.r.angleLines option.

Grid lines on radial axes

Grid lines for a radial axis are drawn on the chart area. They are configured in the scales.r.grid option.

Point labels on radial axes

Point labels indicate the value for each angle line on a radial axis. Point labels are configured in the scales.r.pointLabels option.

Ticks on radial axes

Ticks on a radial axis are used to label values based on how far they are from the center of the axis. Ticks are configured in the scales.r.ticks option.

Radial grid color configuration example

The following example shows how to configure the color of grid lines in a radial axis: config = { type: 'radar', data, options: { scales: { r: { grid: { color: 'red' } } } } }

Radial point labels color configuration example

The following example shows how to configure the color of point labels in a radial axis: config = { type: 'radar', data, options: { scales: { r: { pointLabels: { color: 'red' } } } } }

Radial ticks color configuration example

The following example shows how to configure the color of ticks in a radial axis: config = { type: 'radar', data, options: { scales: { r: { ticks: { color: 'red' } } } } }

Custom scale class structure

Custom axes in Chart.js should extend Chart.Scale. The custom scale class must have an id property (set as a static property on the class) and a defaults property containing the default configuration object.

Register custom scale with Chart.register

After creating a custom scale class, register it using Chart.register(MyScale). If the custom scale does not extend Chart.Scale, use Chart.registry.addScales(MyScale) instead to be explicit about registration.

Use custom scale in chart config

To use a registered custom scale, set the type property in the scales configuration to match the scale's id. For example, set type: 'myScale' in the options.scales.y section when creating a chart.

Scale instance properties from fitting process

Scale instances receive the following properties during fitting: left (left edge of bounding box), right (right edge), top, bottom, width (right - left), height (bottom - top). The margins object contains left, right, top, bottom margins outside the bounding box. The paddingLeft, paddingRight, paddingTop, paddingBottom properties define padding inside the bounding box.

Required scale interface methods

Custom scales must implement: determineDataLimits() to set this.min and this.max; buildTicks() to create a ticks array; getLabelForValue(value) to return the label for a value; getPixelForTick(index) to get the pixel coordinate for a tick by index; getPixelForValue(value, index) to get the pixel coordinate for a value; getValueForPixel(pixel) to get the value for a given pixel coordinate.

Optional scale interface methods

Custom scales may optionally override generateTickLabels() (default calls this.options.ticks.callback), calculateLabelRotation() (default only rotates for horizontal scales), fit() (default fits into canvas, must set this.minSize with width and height properties, and this.width and this.height), and draw(chartArea) (default draws onto canvas using left|right|top|bottom coordinates, chartArea parameter has left, right, top, bottom properties for the data area).

Scale utility functions

The Chart.Scale base class provides isHorizontal() which returns true if the scale instance is horizontal, and getTicks() which returns the scale tick objects containing label and major properties.

Custom scale example

Example of creating and registering a custom scale: class MyScale extends Chart.Scale { /* extensions ... */ } MyScale.id = 'myScale'; MyScale.defaults = defaultConfigObject; Chart.register(MyScale); const lineChart = new Chart(ctx, { data: data, type: 'line', options: { scales: { y: { type: 'myScale' } } } });

Specify matching minRotation and maxRotation

To improve tick calculation performance, set `minRotation` and `maxRotation` to the same value. This avoids automatic rotation calculation overhead.

Use ticks.sampleSize for faster axis rendering

Set the `ticks.sampleSize` option to determine label sizes by examining only a subset of labels rather than all labels. This renders axes more quickly and works best when there is not large variance in label sizes.

Give your agent this brain