new·The score now tells you which way it movedA brain's exam only ever grows: its own material writes questions, and so does every question a real caller asked and did not get answered. The score is a percentage over that growing set, so a brain that learned more could post a smaller number — and this week three did. One of them answered two MORE questions than the week before and showed eighteen points less. Printed as a single percentage, that reads as decline to a reader and as punishment to anyone who contributes material.all news →
mozg.beta
Sign in

Chart.js · all subjects

scales/cartesian

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

Cartesian axes types in Chart.js

Chart.js includes five cartesian axes by default: linear, logarithmic, category, time, and timeseries. Cartesian axes are used for line, bar, and bubble charts.

Cartesian axis visual components

A cartesian axis is composed of five configurable visual components: border (drawn at the edge of the axis beside the chart area), grid lines (drawn on the chart area), tick marks (the extension of the grid line from the axis border to the label), ticks (data value labels on the axis), and title (used to label the data).

Axis ID and dataset binding

The dataset properties yAxisID or xAxisID must match the corresponding scale ID in the scales configuration object. This is especially important for multi-axes charts.

Multiple axes example

To create multiple Y axes in a chart, add multiple configuration objects to the scales property with different axis IDs. Each dataset can be bound to a specific axis using the yAxisID property. When adding new axes, you must specify the type of each axis explicitly as default types are not used. Example: ```javascript const myChart = new Chart(ctx, { type: 'line', data: { datasets: [{ data: [20, 50, 100, 75, 25, 0], label: 'Left dataset', yAxisID: 'left-y-axis' }, { data: [0.1, 0.5, 1.0, 2.0, 1.5, 0], label: 'Right dataset', yAxisID: 'right-y-axis' }], labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] }, options: { scales: { 'left-y-axis': { type: 'linear', position: 'left' }, 'right-y-axis': { type: 'linear', position: 'right' } } } }); ```

Time series scale extends time scale

The time series scale extends from the time scale and supports all the same options as the time scale.

Configure time series scale on x-axis

To use a time series scale, set the scale type to 'timeseries' in the scales configuration. Example: const chart = new Chart(ctx, { type: 'line', data: data, options: { scales: { x: { type: 'timeseries' } } } });

Time series scale spreads data points equidistant

In the time series scale, each data point is spread equidistant, unlike the time scale which may have variable spacing.

Cartesian scale types

Cartesian scales for x/y axes include CategoryScale, LinearScale, LogarithmicScale, TimeScale, and TimeSeriesScale.

Axis position left and right for multi-axis charts

In a multi-axis line chart, y-axis scales can be positioned on the 'left' or 'right' side of the chart using the position property in the scale configuration. The left position is used for the primary y axis, and the right position for secondary axes.

Axis position: object property coordinates

When positioning a scale with an object, the x scale accepts a y property to set its vertical position, and the y scale accepts an x property to set its horizontal position. For instance, {y: 30} positions an axis 30 units vertically, and {x: -60} positions an axis -60 units horizontally.

Center positioning example: scatter chart with centered axes

A scatter chart can have both x and y axes positioned at the center by setting chart.options.scales.x.position = 'center' and chart.options.scales.y.position = 'center'. This positions the axes in the center of the chart area instead of at the edges.

Scale position property: string or object

The scale position can be set to a string value like 'bottom', 'left', or 'center', or to an object with x and y properties. For example, chart.options.scales.x.position can be set to 'center', or to {y: 30} to position the vertical axis at y=30. The y scale position can be set to 'left' by default, or to {x: -60} to position the horizontal axis at x=-60.

Give your agent this brain