Linear axis tick configuration options
Linear axis tick options are in the namespace options.scales[scaleId].ticks. The count option (number, scriptable, undefined by default) specifies the number of ticks to generate, overriding automatic generation if specified. The format option (object) provides Intl.NumberFormat options used by the default label formatter. The precision option (number, scriptable) defines the decimal places for rounding the step size if stepSize is not specified. The stepSize option (number, scriptable) sets a user-defined fixed step size for the scale.
Linear scale stepSize example
This example creates a y-axis with ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5 by setting stepSize to 0.5:
```javascript
let options = {
scales: {
y: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
```
Linear scale grace example
This example demonstrates a bar chart with grace set to '5%' on the y-axis:
```js
const labels = Utils.months({count: 7});
const data = {
labels: ['Positive', 'Negative'],
datasets: [{
data: [100, -50],
backgroundColor: 'rgb(255, 99, 132)'
}],
};
const config = {
type: 'bar',
data,
options: {
scales: {
y: {
type: 'linear',
grace: '5%'
}
},
plugins: {
legend: false
}
}
};
module.exports = {
actions: [],
config: config,
};
```
Linear scale purpose and placement
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 itself to use a linear scale for the x-axis. Linear interpolation is used to determine where a value lies on the axis.
Linear axis configuration options
Linear axis configuration options are in the namespace options.scales[scaleId]. The beginAtZero option is a boolean that, if true, makes the scale include 0 if it is not already included. The grace option accepts a number or string ending with % for percentage. Grace adds room in the scale range above and below data, extending the scale range as if the data values were that much greater or lesser. Grace as a percentage is calculated relative to data values; as a number it is treated as an absolute value.
stepSize example with radial scale
Example showing stepSize configuration for a radial scale with ticks at 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 4.5, 5:
```javascript
let options = {
scales: {
r: {
max: 5,
min: 0,
ticks: {
stepSize: 0.5
}
}
}
};
```
Linear radial scale purpose and interpolation
The linear radial scale is used to chart numerical data. Linear interpolation is used to determine where a value lies in relation to the center of the axis.
Linear radial tick configuration options table
Linear radial 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 | (undefined) | 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 | (undefined) | If defined and stepSize is not specified, the step size will be rounded to this many decimal places |
| stepSize | number | Yes | (undefined) | User defined fixed step size for the scale |
Linear radial axis configuration options table
Linear radial axis specific configuration options (namespace: options.scales[scaleId]):
| Name | Type | Default | Description |
| animate | boolean | true | Whether to animate scaling the chart from the centre |
| angleLines | object | (undefined) | Angle line configuration |
| beginAtZero | boolean | false | If true, scale will include 0 if it is not already included |
| pointLabels | object | (undefined) | Point label configuration |
| startAngle | number | 0 | Starting angle of the scale. In degrees, 0 is at top |
Linear radial scale internal data format
Internally, the linear radial scale uses numeric data.
suggestedMin and suggestedMax example
Example showing how suggestedMin and suggestedMax extend the axis range. With data values [0, 20, 40, 50], suggestedMin of 50, and suggestedMax of 100, the largest positive value of 50 is expanded to 100. However, because the lowest data value of 0 is below the suggestedMin setting of 50, the suggestedMin is ignored:
```javascript
let chart = new Chart(ctx, {
type: 'radar',
data: {
datasets: [{
label: 'First dataset',
data: [0, 20, 40, 50]
}],
labels: ['January', 'February', 'March', 'April']
},
options: {
scales: {
r: {
suggestedMin: 50,
suggestedMax: 100
}
}
}
});
```
Point label configuration options table
Point label configuration options (namespace: options.scales[scaleId].pointLabels):
| Name | Type | Scriptable | Default | Description |
| backdropColor | Color | true | undefined | Background color of the point label |
| backdropPadding | Padding | | 2 | Padding of label backdrop |
| borderRadius | number|object | true | 0 | Border radius of the point label |
| display | boolean|string | | true | If true, point labels are shown. When display: 'auto', the label is hidden if it overlaps with another label |
| callback | function | | (undefined) | Callback function to transform data labels to point labels. The default implementation simply returns the current string |
| color | Color | Yes | Chart.defaults.color | Color of label |
| font | Font | Yes | Chart.defaults.font | Font configuration |
| padding | number | Yes | 5 | Padding between chart and point labels |
| centerPointLabels | boolean | | false | If true, point labels are centered |
Angle line configuration options table
Angle line configuration options (namespace: options.scales[scaleId].angleLines):
| Name | Type | Scriptable | Default | Description |
| display | boolean | | true | If true, angle lines are shown |
| color | Color | Yes | Chart.defaults.borderColor | Color of angled lines |
| lineWidth | number | Yes | 1 | Width of angled lines |
| borderDash | number[] | Yes | [] | Length and spacing of dashes on angled lines. Note: borderDash setting only accepts a static value or a function; passing an array of arrays is not supported |
| borderDashOffset | number | Yes | 0.0 | Offset for line dashes |
Linear scales now add/subtract 5% instead of 1 to range
In Chart.js 4.0, linear scales now add and subtract 5% of the max value to the range if the min and max are the same, instead of adding and subtracting 1.
Linear scale with suggested min-max example
This example demonstrates configuring a line chart with suggested min-max values on a linear y-axis. The chart has two datasets with monthly data. The y-axis is configured with suggestedMin: 30 and suggestedMax: 50, which constrains the axis range while respecting actual data values.
suggestedMin and suggestedMax for linear scales
For linear scales, the suggestedMin and suggestedMax options set suggested minimum and maximum values for the axis. The actual data minimum used for determining ticks is Math.min(dataMin, suggestedMin), and the actual data maximum is Math.max(dataMax, suggestedMax). These are set within the scale configuration under the y (or x) scale property.
Linear scale min and max options
The y scale supports min and max options to set the lower and upper bounds of the axis. In the example, a line chart with two datasets uses min: 10 and max: 50 on the y scale to constrain the axis range from 10 to 50, regardless of the actual data values.
Linear scale step size configuration example
const config = {
type: 'line',
data: data,
options: {
scales: {
y: {
min: 0,
max: 100,
ticks: {
stepSize: 50
}
}
}
}
};
This example shows how to set a fixed step size of 50 units on a Y-axis.
Linear scale stepSize tick option
The stepSize option forces the linear scale to use a specific step size between tick values. In the example, setting ticks.stepSize to 50 on a Y-axis with min 0 and max 100 produces tick marks at 0, 50, and 100.
Linear scale stacking properties
A linear scale in a stacked configuration uses the properties: type: 'linear', position: 'left' (or 'right'), stack: the stack group name, stackWeight: a number determining relative size, and border.color for styling the axis line.