From f750736bad03e9ec9abee75167c2c626796e7e59 Mon Sep 17 00:00:00 2001 From: sbosse Date: Mon, 21 Jul 2025 23:36:11 +0200 Subject: [PATCH] Mon 21 Jul 22:43:21 CEST 2025 --- js/ui/chart/docs/axes/cartesian/category.md | 69 +++++++++++++++++++++ 1 file changed, 69 insertions(+) create mode 100644 js/ui/chart/docs/axes/cartesian/category.md diff --git a/js/ui/chart/docs/axes/cartesian/category.md b/js/ui/chart/docs/axes/cartesian/category.md new file mode 100644 index 0000000..690b712 --- /dev/null +++ b/js/ui/chart/docs/axes/cartesian/category.md @@ -0,0 +1,69 @@ +# Category Cartesian Axis + +If 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: { + xAxes: [{ + type: 'category', + labels: ['January', 'February', 'March', 'April', 'May', 'June'] + }] + } + } +}); +``` + +## Tick Configuration Options + +The category scale provides the following options for configuring tick marks. They are nested in the `ticks` sub object. These options extend the [common tick configuration](README.md#tick-configuration). + +| Name | Type | Default | Description +| ---- | ---- | ------- | ----------- +| `labels` | `string[]` | - | An array of labels to display. +| `min` | `string` | | The minimum item to display. [more...](#min-max-configuration) +| `max` | `string` | | The maximum item to display. [more...](#min-max-configuration) + +## Min Max Configuration +For both the `min` and `max` properties, the value must be in the `labels` 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: { + xAxes: [{ + ticks: { + min: 'March' + } + }] + } + } +}); +```