| commit | author | age | ||
| 83c3f6 | 1 | # Category Cartesian Axis |
| SP | 2 | |
| 3 | 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. | |
| 4 | ||
| 5 | 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. | |
| 6 | ||
| 7 | ## Category Axis Definition | |
| 8 | ||
| 9 | Globally: | |
| 10 | ||
| 11 | ```javascript | |
| 12 | let chart = new Chart(ctx, { | |
| 13 | type: ... | |
| 14 | data: { | |
| 15 | labels: ['January', 'February', 'March', 'April', 'May', 'June'], | |
| 16 | datasets: ... | |
| 17 | }, | |
| 18 | }); | |
| 19 | ``` | |
| 20 | As part of axis definition: | |
| 21 | ||
| 22 | ```javascript | |
| 23 | let chart = new Chart(ctx, { | |
| 24 | type: ... | |
| 25 | data: ... | |
| 26 | options: { | |
| 27 | scales: { | |
| 28 | xAxes: [{ | |
| 29 | type: 'category', | |
| 30 | labels: ['January', 'February', 'March', 'April', 'May', 'June'], | |
| 31 | }] | |
| 32 | } | |
| 33 | } | |
| 34 | }); | |
| 35 | ``` | |
| 36 | ||
| 37 | ## Tick Configuration Options | |
| 38 | ||
| 39 | 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). | |
| 40 | ||
| 41 | | Name | Type | Default | Description | |
| 42 | | -----| ---- | --------| ----------- | |
| 43 | | `labels` | `Array[String]` | - | An array of labels to display. | |
| 44 | | `min` | `String` | | The minimum item to display. [more...](#min-max-configuration) | |
| 45 | | `max` | `String` | | The maximum item to display. [more...](#min-max-configuration) | |
| 46 | ||
| 47 | ## Min Max Configuration | |
| 48 | 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". | |
| 49 | ||
| 50 | ```javascript | |
| 51 | let chart = new Chart(ctx, { | |
| 52 | type: 'line', | |
| 53 | data: { | |
| 54 | datasets: [{ | |
| 55 | data: [10, 20, 30, 40, 50, 60] | |
| 56 | }], | |
| 57 | labels: ['January', 'February', 'March', 'April', 'May', 'June'], | |
| 58 | }, | |
| 59 | options: { | |
| 60 | scales: { | |
| 61 | xAxes: [{ | |
| 62 | ticks: { | |
| 63 | min: 'March' | |
| 64 | } | |
| 65 | }] | |
| 66 | } | |
| 67 | } | |
| 68 | }); | |
| 69 | ``` | |
