mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00:00
104 lines
3.2 KiB
Plaintext
104 lines
3.2 KiB
Plaintext
---
|
|
title: Linear Axis
|
|
---
|
|
|
|
import CommonAll from '../_common.md'
|
|
import CommonCartesian from './_common.md'
|
|
import CommonTicks from './_common_ticks.md'
|
|
import CommonTicksAll from '../_common_ticks.md'
|
|
|
|
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...](#grace)
|
|
|
|
<CommonCartesian />
|
|
<CommonAll />
|
|
|
|
## Tick Configuration
|
|
|
|
### Linear Axis specific tick options
|
|
|
|
Namespace: `options.scales[scaleId].ticks`
|
|
|
|
| Name | Type | Default | Description
|
|
| ---- | ---- | ------- | -----------
|
|
| `format` | `object` | | The [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) options used by the default label formatter
|
|
| `maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.
|
|
| `precision` | `number` | | if defined and `stepSize` is not specified, the step size will be rounded to this many decimal places.
|
|
| `stepSize` | `number` | | User-defined fixed step size for the scale. [more...](#step-size)
|
|
|
|
<CommonTicks />
|
|
<CommonTicksAll />
|
|
|
|
## 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`.
|
|
|
|
```javascript
|
|
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 minumum data. This extends the scale range as if the data values were that much greater.
|
|
|
|
import { useEffect, useRef } from 'react';
|
|
|
|
```jsx live
|
|
function example() {
|
|
const canvas = useRef(null);
|
|
useEffect(() => {
|
|
const cfg = {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Positive', 'Negative'],
|
|
datasets: [{
|
|
data: [100, -50],
|
|
backgroundColor: 'rgb(255, 99, 132)'
|
|
}],
|
|
},
|
|
options: {
|
|
scales: {
|
|
y: {
|
|
type: 'linear',
|
|
grace: '5%'
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: false
|
|
}
|
|
}
|
|
};
|
|
const chart = new Chart(canvas.current.getContext('2d'), cfg);
|
|
return () => chart.destroy();
|
|
});
|
|
return <div className="chartjs-wrapper"><canvas ref={canvas} className="chartjs"></canvas></div>;
|
|
}
|
|
```
|
|
|
|
## Internal data format
|
|
|
|
Internally, the linear scale uses numeric data
|