mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 20:59:08 +02:00
ed2b96eeaf
* Initial work * Update doc commands * Updated sidebar config * Move docs * Update theme version and enable * Convert to chart.js sample * Update scripts to point to local build * Chart.js from local build * Simplify getting-started example * Axis docs updated except for imported content * Common ticks import works * Chart type docs ported to editor plugin * Last pages to use editor * Fix small errors * Frontmatter title to heading * Remove duplicate example * Update sidebar * Add paths * Remove paths * Add getting-started back * Update menus and add copyright to license section of the docs * Add GA plugin * Style sub-groups * Remove unneeded license page since it is covered on the main page * Remove docusaurus readme page * Remove docusaurus files * Fix issues in docs * Build and deploy scripts for docs work * Conditional base URL for nice local testing * Use eslint-plugin-markdown * Remove hard coded lines * Remove mentions of docusaurus Co-authored-by: Jukka Kurkela <jukka.kurkela@gmail.com>
102 lines
3.0 KiB
Markdown
102 lines
3.0 KiB
Markdown
# 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...](#grace)
|
|
|
|
!!!include(axes/cartesian/_common.md)!!!
|
|
|
|
!!!include(axes/_common.md)!!!
|
|
|
|
## Tick Configuration
|
|
|
|
### Linear Axis specific tick options
|
|
|
|
Namespace: `options.scales[scaleId].ticks`
|
|
|
|
| Name | Type | Default | Description
|
|
| ---- | ---- | ------- | -----------
|
|
| `count` | `number` | `undefined` | The number of ticks to generate. If specified, this overrides the automatic generation.
|
|
| `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)
|
|
|
|
!!!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`.
|
|
|
|
```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 minimum data. This extends the scale range as if the data values were that much greater.
|
|
|
|
```js chart-editor
|
|
// <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
|