* Fixes #8835 * context as argument because protected * fixes test case on formatters * reverts previous commits and sets the scale context in the scale init * changes documentation about linear ticks, adding scriptable Yes
3.0 KiB
Linear Axis
The linear scale is used to chart numerical data. It can be placed on either the x or y-axis. The scatter chart type automatically configures a line chart to use one of these scales for the x-axis. As the name suggests, linear interpolation is used to determine where a value lies on the axis.
Configuration Options
Linear Axis specific options
Namespace: options.scales[scaleId]
Name | Type | Description |
---|---|---|
beginAtZero |
boolean |
if true, scale will include 0 if it is not already included. |
grace |
number |string |
Percentage (string ending with % ) or amount (number) for added room in the scale range above and below data. more... |
!!!include(axes/cartesian/_common.md)!!!
!!!include(axes/_common.md)!!!
Tick Configuration
Linear Axis specific tick options
Namespace: options.scales[scaleId].ticks
Name | Type | Scriptable | Default | Description |
---|---|---|---|---|
count |
number |
Yes | undefined |
The number of ticks to generate. If specified, this overrides the automatic generation. |
format |
object |
Yes | The Intl.NumberFormat options used by the default label formatter |
|
maxTicksLimit |
number |
Yes | 11 |
Maximum number of ticks and gridlines to show. |
precision |
number |
Yes | if defined and stepSize is not specified, the step size will be rounded to this many decimal places. |
|
stepSize |
number |
Yes | User-defined fixed step size for the scale. more... |
!!!include(axes/cartesian/_common_ticks.md)!!!
!!!include(axes/_common_ticks.md)!!!
Step Size
If set, the scale ticks will be enumerated by multiple of stepSize
, having one tick per increment. If not set, the ticks are labeled automatically using the nice numbers algorithm.
This example sets up a chart with a y axis that creates ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5
.
let options = {
scales: {
y: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
Grace
If the value is string ending with %
, its treat as percentage. If number, its treat as value.
The value is added to the maximum data value and subtracted from the minimum data. This extends the scale range as if the data values were that much greater.
// <block:setup:1>
const labels = Utils.months({count: 7});
const data = {
labels: ['Positive', 'Negative'],
datasets: [{
data: [100, -50],
backgroundColor: 'rgb(255, 99, 132)'
}],
};
// </block:setup>
// <block:config:0>
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
type: 'linear',
grace: '5%'
}
},
plugins: {
legend: false
}
}
};
// </block:config>
module.exports = {
actions: [],
config: config,
};
Internal data format
Internally, the linear scale uses numeric data