scales/configuration

132 notes in this subject, read out of this brain and free to use. This is page 2 of 3.

locale option for number formatting

The locale option enables language-sensitive number formatting on chart scales. It accepts a Unicode BCP 47 locale identifier string and leverages the INTL NumberFormat API. The default value is undefined, which uses the default locale of the platform running the chart.

Update scales separately

Scales can be updated separately without changing other options. Pass an object containing all scale customization, including unchanged ones, to chart.options.scales and call chart.update().

Scale references lost after updating with new id or type

Variables referencing scales from chart.scales are lost after updating scales with a new id or changed type. References must be re-assigned after chart.update().

Update specific scale by id

A specific scale can be updated by its id without updating all scales. Assign changes directly to chart.options.scales[id] and call chart.update(). Example: chart.options.scales.y = { type: 'logarithmic' }; chart.update();

Font size does not apply to radialLinear scale labels

The global font size setting does not apply to point labels on radialLinear scales.

x, y padding shorthand example

This example shows how to set 10px left/right and 4px top/bottom padding on a radial linear axis tick backdropPadding using the x, y format: new Chart(ctx, { type: 'radar', data: data, options: { scales: { r: { ticks: { backdropPadding: { x: 10, y: 4 } } } } } });

Option resolution order for scale options

Scale options are resolved in this order: options.scales, overrides[config.type].scales, defaults.scales, defaults.scale.

Scale context properties

Scale context object contains: scale (the associated scale), type (value: 'scale'). It inherits from chart context.

Tick context properties

Tick context object contains: tick (the associated tick object), index (tick index), type (value: 'tick'). It inherits from scale context.

PointLabel context properties

PointLabel context object contains: label (the associated label value), index (label index), type (value: 'pointLabel'). It inherits from scale context. PointLabel context is only used in the radial linear scale.

Scale min and max example

new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { type: 'time', min: new Date('2019-01-01').valueOf(), max: new Date('2019-12-31').valueOf() }, y: { type: 'linear', min: 0, max: 100 } } } });

Specify scale min and max values

Specifying `min` and `max` for scales avoids the overhead of computing the range from the data, improving performance.

Scale configuration for axes

Axes are configured under the scales section in chart options. The x and y properties configure horizontal and vertical axes respectively. Scale options include setting max and min values.

Custom tick format with callback

The ticks.callback option in scale configuration allows a callback function that formats each tick value. The callback receives the tick value as an argument and returns a formatted string.

Radial scale types

Radial scales for r-axis include RadialLinearScale.

radialLinear grid indexable and scriptable options behavior change

In Chart.js 4.0, the radialLinear grid indexable and scriptable options no longer decrease the index of the specified grid line.

Default scale override removed for x/y axes

In Chart.js 4.0, the default scale override has been removed if the configured scale starts with x or y. Defining xAxes in the config will now create a second scale instead of overriding the default x axis.

maxTicksLimit behavior with autoSkip changed

In Chart.js 4.0, maxTicksLimit won't be used for the ticks in autoSkip if the determined max ticks is less than the maxTicksLimit.

Scale border z-index is now configurable

In Chart.js 4.0, the z index for the border of a scale is now configurable instead of being fixed 1 level higher than the grid z index.

Scale grid border configuration renamed to border

In Chart.js 4.0, the following scale grid properties have been renamed: scales[id].grid.drawBorder is now scales[id].border.display, scales[id].grid.borderWidth is now scales[id].border.width, scales[id].grid.borderColor is now scales[id].border.color, scales[id].grid.borderDash is now scales[id].border.dash, and scales[id].grid.borderDashOffset is now scales[id].border.dashOffset.

Custom axis types can be created by extending base axis types

Chart.js allows developers to create derived axis types that inherit from base axes. The log2 axis type is an example of a custom axis type that extends the logarithmic axis functionality.

Derived axis type example: log2 scale

A line chart can use a custom derived axis type named 'log2' by setting the y-axis type to 'log2' in the scales configuration. This example demonstrates how to implement a custom logarithmic axis: const config = { type: 'line', data, options: { responsive: true, scales: { x: { display: true }, y: { display: true, type: 'log2' } } } };

Log2 axis implementation available in Chart.js documentation

The implementation of a log2 custom axis type is provided in the Chart.js repository at scripts/log2.js and serves as a reference for creating derived axis types.

Getting pixel position from scale value

Scale instances have a getPixelForValue(value) method that converts a data value to its corresponding pixel position on the chart canvas, accounting for scale configuration and padding.

Y-axis stacked property for line charts

A line chart can have its y-axis configured with stacked: true to stack datasets vertically.

Stacked configuration on Y-axis

The stacked option is set on the Y-axis scale configuration at chart.options.scales.y.stacked.

Y-axis stacked option values

The y-axis stacked option accepts three values: true (stack all datasets), false (default, no stacking), and 'single' (stack single datasets).

Scale stacked option for bar charts

Set scales.x.stacked: true to enable stacking on the x-axis (for horizontal bar charts or vertical bar chart categories). Set scales.y.stacked: true to enable stacking on the y-axis (for vertical bar charts). Both should be set to true for a fully stacked bar chart.

Scale stacked option

The stacked property on a scale (x or y) controls whether datasets are stacked on that axis. Setting stacked: true on both scales creates a stacked bar chart where bars are accumulated.

Grid lines configuration for secondary axes

When using multiple y axes, the grid.drawOnChartArea property can be set to false for secondary axes to prevent multiple overlapping grid line sets. In a multi-axis chart, typically only the primary axis grid lines are displayed.

centerPointLabels option for radial axis point labels

The centerPointLabels option is a boolean property of the pointLabels configuration for radial axes. When set to true, it centers the point labels around the center of the polar area chart rather than positioning them at the edge. This is configured under scales.r.pointLabels.centerPointLabels in the chart options.

Hide grid lines for specific axis in multi-axis chart

To hide grid lines for a specific axis in a multi-axis chart, set grid.drawOnChartArea to false in that axis's configuration. This prevents grid lines from being drawn on the chart area for that axis while other axes' grid lines may still be visible.

Reverse scale in multi-axis scatter chart

A scale can be reversed using the reverse: true property in the scale configuration. This inverts the direction of the axis, so higher values appear at the bottom instead of the top.

Axis ticks color configuration

The color of axis ticks and labels can be customized using the ticks.color property in the scale configuration. This allows different axes to have different colored ticks for visual distinction.

Stacked option on y-axis enables stacking

To enable stacking on a chart, set `stacked: true` on the y-axis scale configuration. This applies stacking behavior to all datasets that have a `stack` property defined.

Scale getPixelForValue method converts data to pixel coordinates

The getPixelForValue(value) method on a scale object converts a data value to its pixel coordinate. For example, x.getPixelForValue(0) returns the pixel x-coordinate where the data value 0 falls on the x-axis.

Border configuration separate from grid

Axes have a separate border configuration with a display property to control whether the axis border is shown, independent of grid line display settings.

Grid configuration example with scriptable color function

Example showing how to configure grid lines with scriptable options: scales: { x: { border: { display: true }, grid: { display: true, drawOnChartArea: true, drawTicks: true, } }, y: { border: { display: false }, grid: { color: function(context) { if (context.tick.value > 0) { return 'rgb(75, 192, 75)'; } else if (context.tick.value < 0) { return 'rgb(255, 99, 132)'; } return '#000000'; }, }, } } This demonstrates toggling grid display and drawTicks on the X axis, and using a function to color Y axis grid lines based on tick value.

Grid configuration properties for axes

Grid configuration for an axis includes the following properties: display (boolean to show/hide grid lines), drawOnChartArea (boolean to draw grid lines on the chart area), and drawTicks (boolean to draw grid lines at tick positions).

Grid color as scriptable option with tick context

The grid color property can be a function that receives a context object containing context.tick.value, allowing conditional styling of grid lines based on their tick value. This enables coloring grid lines differently based on their numeric value (for example, green for positive values, red for negative values).

Multi-line tick labels

Tick labels can display on multiple lines by providing an array of strings for each label instead of a single string. For example, ['June', '2015'] will display June on one line and 2015 on the next.

Hide alternate tick labels example

To hide every second tick label, use a callback that returns the label when `index % 2 === 0` and an empty string otherwise: `callback: function(val, index) { return index % 2 === 0 ? this.getLabelForValue(val) : ''; }`

Tick callback context and getLabelForValue

Within a tick callback function, `this.getLabelForValue(val)` can be used to look up the label string for a given value on a category axis.

Tick label filtering with callback

Tick labels can be filtered or hidden using a callback function in `chart.options.scales.x.ticks.callback`. The callback receives the value and index parameters. For a category axis, the value is the index, and `this.getLabelForValue(val)` retrieves the label. Returning an empty string hides the tick label.

Tick color configuration

The color of tick labels can be set using the `chart.options.scales.x.ticks.color` property, specified as a CSS color value.

Tick alignment options on X axis

The x-axis ticks can be aligned using the `chart.options.scales.x.ticks.align` property. Valid alignment values are 'start', 'center' (the default), and 'end'.

Example: configuring y-axis title with font style

To configure a y-axis title, use: title: { display: true, text: 'Value', color: '#191', font: { family: 'Times', size: 20, style: 'normal', lineHeight: 1.2 }, padding: {top: 30, left: 0, right: 0, bottom: 0} }

Example: configuring x-axis title with font and color

To configure an x-axis title, use: title: { display: true, text: 'Month', color: '#911', font: { family: 'Comic Sans MS', size: 20, weight: 'bold', lineHeight: 1.2 }, padding: {top: 20, left: 0, right: 0, bottom: 0} }

Scale title configuration properties

A scale title is configured via the title object within a scale configuration. The title object accepts the following properties: display (boolean, whether to show the title), text (string, the title text), color (string, hex color code for the title text), font (object with family, size, weight/style, and lineHeight properties), and padding (object with top, left, right, and bottom pixel values).

Scale title font options

The font object within a scale title accepts the following properties: family (string, font family name like 'Comic Sans MS' or 'Times'), size (number, font size in pixels like 20), weight (string, font weight like 'bold'), style (string, font style like 'normal'), and lineHeight (number, line height multiplier like 1.2).

Scale title padding configuration

The padding object within a scale title accepts top, left, right, and bottom properties, each specified in pixels. For example, padding: {top: 20, left: 0, right: 0, bottom: 0} adds 20 pixels of padding above the title.

Scale max option sets upper bound

The max option on a scale sets the upper bound of the axis range. For example, setting max: 50 on the y scale ensures the axis ends at 50.

Scale min option sets lower bound

The min option on a scale sets the lower bound of the axis range. For example, setting min: 10 on the y scale ensures the axis starts at 10.

Stacked scales example with line chart

Example showing a line chart with two stacked y-axes: a linear scale positioned left with stack 'demo' and stackWeight 2, and a category scale positioned left with stack 'demo' and stackWeight 1. The first dataset plots numeric values against the linear y-axis. The second dataset plots categorical values ['ON', 'OFF'] against the category y2-axis with stepped: true and yAxisID: 'y2'.

Stacked scales with multiple axes

Multiple axes can be stacked together using the stack property on each scale. The stack property groups scales by name, and stackWeight determines the relative size of each stacked scale. In the example, a linear y-axis and a category y2-axis are both assigned stack: 'demo' with stackWeight values of 2 and 1 respectively.

v3 scales configuration example

Example of v2 to v3 scales migration: v2 configuration: options: { scales: { xAxes: [{ id: 'x', type: 'time', display: true, title: { display: true, text: 'Date' }, ticks: { major: { enabled: true }, font: function(context) { if (context.tick && context.tick.major) { return { weight: 'bold', color: '#FF0000' }; } } } }], yAxes: [{ id: 'y', display: true, title: { display: true, text: 'value' } }] } } v3 configuration: options: { scales: { x: { type: 'time', display: true, title: { display: true, text: 'Date' }, ticks: { major: { enabled: true }, color: (context) => context.tick && context.tick.major && '#FF0000', font: function(context) { if (context.tick && context.tick.major) { return { weight: 'bold' }; } } } }, y: { display: true, title: { display: true, text: 'value' } } } }

gridLines.offsetGridLines renamed to grid.offset in v3

In Chart.js 3.x, `options.gridLines.offsetGridLines` was renamed to `options.grid.offset`.

gridLines.tickMarkLength renamed to grid.tickLength in v3

In Chart.js 3.x, `options.gridLines.tickMarkLength` was renamed to `options.grid.tickLength`.

fixedStepSize removed in v3

In Chart.js 3.x, `options.ticks.fixedStepSize` is no longer used. Use `options.ticks.stepSize` instead.

major and minor ticks replaced in v3

In Chart.js 3.x, `options.ticks.major` and `options.ticks.minor` were replaced with scriptable options for tick fonts.

Give your agent this brain