mirror of
https://github.com/chartjs/Chart.js.git
synced 2025-12-08 20:36:08 +00: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>
86 lines
2.6 KiB
Markdown
86 lines
2.6 KiB
Markdown
# Category Axis
|
|
|
|
If the global configuration is used, labels are drawn from one of the label arrays included in the chart data. If only `data.labels` is defined, this will be used. If `data.xLabels` is defined and the axis is horizontal, this will be used. Similarly, if `data.yLabels` is defined and the axis is vertical, this property will be used. Using both `xLabels` and `yLabels` together can create a chart that uses strings for both the X and Y axes.
|
|
|
|
Specifying any of the settings above defines the x-axis as `type: 'category'` if not defined otherwise. For more fine-grained control of category labels, it is also possible to add `labels` as part of the category axis definition. Doing so does not apply the global defaults.
|
|
|
|
## Category Axis Definition
|
|
|
|
Globally:
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: ...
|
|
data: {
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
|
|
datasets: ...
|
|
}
|
|
});
|
|
```
|
|
|
|
As part of axis definition:
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: ...
|
|
data: ...
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
type: 'category',
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June']
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## Configuration Options
|
|
|
|
### Category Axis specific options
|
|
|
|
Namespace: `options.scales[scaleId]`
|
|
|
|
| Name | Type | Description
|
|
| ---- | ---- | -----------
|
|
| `min` | `string`\|`number` | The minimum item to display. [more...](#min-max-configuration)
|
|
| `max` | `string`\|`number` | The maximum item to display. [more...](#min-max-configuration)
|
|
| `labels` | `string[]`\|`string[][]` | An array of labels to display. When an individual label is an array of strings, each item is rendered on a new line.
|
|
|
|
!!!include(axes/cartesian/_common.md)!!!
|
|
|
|
!!!include(axes/_common.md)!!!
|
|
|
|
## Tick Configuration
|
|
|
|
!!!include(axes/cartesian/_common_ticks.md)!!!
|
|
|
|
!!!include(axes/_common_ticks.md)!!!
|
|
|
|
## Min Max Configuration
|
|
|
|
For both the `min` and `max` properties, the value must be `string` in the `labels` array or `numeric` value as an index of a label in that array. In the example below, the x axis would only display "March" through "June".
|
|
|
|
```javascript
|
|
let chart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: [{
|
|
data: [10, 20, 30, 40, 50, 60]
|
|
}],
|
|
labels: ['January', 'February', 'March', 'April', 'May', 'June']
|
|
},
|
|
options: {
|
|
scales: {
|
|
x: {
|
|
min: 'March'
|
|
}
|
|
}
|
|
}
|
|
});
|
|
```
|
|
|
|
## Internal data format
|
|
|
|
Internally category scale uses label indices
|