* 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>
2.6 KiB
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:
let chart = new Chart(ctx, {
type: ...
data: {
labels: ['January', 'February', 'March', 'April', 'May', 'June'],
datasets: ...
}
});
As part of axis definition:
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... |
max |
string |number |
The maximum item to display. more... |
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".
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