mirror of
https://github.com/chartjs/Chart.js.git
synced 2024-10-07 12:49:07 +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>
179 lines
3.3 KiB
Markdown
179 lines
3.3 KiB
Markdown
# Radial Axes
|
|
|
|
Radial axes are used specifically for the radar and polar area chart types. These axes overlay the chart area, rather than being positioned on one of the edges. One radial axis is included by default in Chart.js.
|
|
|
|
* [radialLinear](./linear.mdx)
|
|
|
|
## Visual Components
|
|
|
|
A radial axis is composed of visual components that can be individually configured. These components are:
|
|
|
|
* [angle lines](#angle-lines)
|
|
* [grid lines](#grid-lines)
|
|
* [point labels](#point-labels)
|
|
* [ticks](#ticks)
|
|
|
|
### Angle Lines
|
|
|
|
The grid lines for an axis are drawn on the chart area. They stretch out from the center towards the edge of the canvas. In the example below, they are red.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const labels = Utils.months({count: 7});
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1,
|
|
data: [10, 20, 30, 40, 50, 0, 5],
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'radar',
|
|
data,
|
|
options: {
|
|
scales: {
|
|
r: {
|
|
angleLines: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
### Grid Lines
|
|
|
|
The grid lines for an axis are drawn on the chart area. In the example below, they are red.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const labels = Utils.months({count: 7});
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1,
|
|
data: [10, 20, 30, 40, 50, 0, 5],
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'radar',
|
|
data,
|
|
options: {
|
|
scales: {
|
|
r: {
|
|
grid: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
### Point Labels
|
|
|
|
The point labels indicate the value for each angle line. In the example below, they are red.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const labels = Utils.months({count: 7});
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1,
|
|
data: [10, 20, 30, 40, 50, 0, 5],
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'radar',
|
|
data,
|
|
options: {
|
|
scales: {
|
|
r: {
|
|
pointLabels: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|
|
|
|
### Ticks
|
|
|
|
The ticks are used to label values based on how far they are from the center of the axis. In the example below, they are red.
|
|
|
|
```js chart-editor
|
|
// <block:setup:1>
|
|
const labels = Utils.months({count: 7});
|
|
const data = {
|
|
labels: labels,
|
|
datasets: [{
|
|
label: 'My First dataset',
|
|
backgroundColor: 'rgba(54, 162, 235, 0.5)',
|
|
borderColor: 'rgb(54, 162, 235)',
|
|
borderWidth: 1,
|
|
data: [10, 20, 30, 40, 50, 0, 5],
|
|
}]
|
|
};
|
|
// </block:setup>
|
|
|
|
// <block:config:0>
|
|
const config = {
|
|
type: 'radar',
|
|
data,
|
|
options: {
|
|
scales: {
|
|
r: {
|
|
ticks: {
|
|
color: 'red'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
// </block:config>
|
|
|
|
module.exports = {
|
|
actions: [],
|
|
config: config,
|
|
};
|
|
```
|