mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-06 12:19:08 +02:00
69dd0bde6c
* respect new scale option 'order' when ordering scales * scale service - respect new weight scale option for axes ordering * added test for scale ordering by weight * removed trailing spaces from layout weight scale order test
59 lines
3.5 KiB
Markdown
59 lines
3.5 KiB
Markdown
# Axes
|
|
|
|
Axes are an integral part of a chart. They are used to determine how data maps to a pixel value on the chart. In a cartesian chart, there is 1 or more X axis and 1 or more Y axis to map points onto the 2 dimensional canvas. These axes are know as ['cartesian axes'](./cartesian/README.md#cartesian-axes).
|
|
|
|
In a radial chart, such as a radar chart or a polar area chart, there is a single axis that maps points in the angular and radial directions. These are known as ['radial axes'](./radial/README.md#radial-axes).
|
|
|
|
Scales in Chart.js >V2.0 are significantly more powerful, but also different than those of v1.0.
|
|
* Multiple X & Y axes are supported.
|
|
* A built-in label auto-skip feature detects would-be overlapping ticks and labels and removes every nth label to keep things displaying normally.
|
|
* Scale titles are supported
|
|
* New scale types can be extended without writing an entirely new chart type
|
|
|
|
# Common Configuration
|
|
|
|
The following properties are common to all axes provided by Chart.js
|
|
|
|
| Name | Type | Default | Description
|
|
| ---- | ---- | ------- | -----------
|
|
| `display` | `Boolean` | `true` | If set to `false` the axis is hidden from view. Overrides *gridLines.display*, *scaleLabel.display*, and *ticks.display*.
|
|
| `callbacks` | `Object` | | Callback functions to hook into the axis lifecycle. [more...](#callbacks)
|
|
| `weight` | `Number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.
|
|
|
|
## Callbacks
|
|
There are a number of config callbacks that can be used to change parameters in the scale at different points in the update process.
|
|
|
|
| Name | Arguments | Description
|
|
| ---- | --------- | -----------
|
|
| `beforeUpdate` | `axis` | Callback called before the update process starts.
|
|
| `beforeSetDimensions` | `axis` | Callback that runs before dimensions are set.
|
|
| `afterSetDimensions` | `axis` | Callback that runs after dimensions are set.
|
|
| `beforeDataLimits` | `axis` | Callback that runs before data limits are determined.
|
|
| `afterDataLimits` | `axis` | Callback that runs after data limits are determined.
|
|
| `beforeBuildTicks` | `axis` | Callback that runs before ticks are created.
|
|
| `afterBuildTicks` | `axis` | Callback that runs after ticks are created. Useful for filtering ticks.
|
|
| `beforeTickToLabelConversion` | `axis` | Callback that runs before ticks are converted into strings.
|
|
| `afterTickToLabelConversion` | `axis` | Callback that runs after ticks are converted into strings.
|
|
| `beforeCalculateTickRotation` | `axis` | Callback that runs before tick rotation is determined.
|
|
| `afterCalculateTickRotation` | `axis` | Callback that runs after tick rotation is determined.
|
|
| `beforeFit` | `axis` | Callback that runs before the scale fits to the canvas.
|
|
| `afterFit` | `axis` | Callback that runs after the scale fits to the canvas.
|
|
| `afterUpdate` | `axis` | Callback that runs at the end of the update process.
|
|
|
|
## Updating Axis Defaults
|
|
|
|
The default configuration for a scale can be easily changed using the scale service. All you need to do is to pass in a partial configuration that will be merged with the current scale default configuration to form the new default.
|
|
|
|
For example, to set the minimum value of 0 for all linear scales, you would do the following. Any linear scales created after this time would now have a minimum of 0.
|
|
|
|
```javascript
|
|
Chart.scaleService.updateScaleDefaults('linear', {
|
|
ticks: {
|
|
min: 0
|
|
}
|
|
});
|
|
```
|
|
|
|
## Creating New Axes
|
|
To create a new axis, see the [developer docs](../developers/axes.md).
|