| commit | author | age | ||
| 83c3f6 | 1 | # Cartesian Axes |
| SP | 2 | |
| 3 | Axes that follow a cartesian grid are known as 'Cartesian Axes'. Cartesian axes are used for line, bar, and bubble charts. Four cartesian axes are included in Chart.js by default. | |
| 4 | ||
| 5 | * [linear](./linear.md#linear-cartesian-axis) | |
| 6 | * [logarithmic](./logarithmic.md#logarithmic-cartesian-axis) | |
| 7 | * [category](./category.md#category-cartesian-axis) | |
| 8 | * [time](./time.md#time-cartesian-axis) | |
| 9 | ||
| 10 | # Common Configuration | |
| 11 | ||
| 12 | All of the included cartesian axes support a number of common options. | |
| 13 | ||
| 14 | | Name | Type | Default | Description | |
| 15 | | -----| ---- | --------| ----------- | |
| 16 | | `type` | `String` | | Type of scale being employed. Custom scales can be created and registered with a string key. This allows changing the type of an axis for a chart. | |
| 17 | | `position` | `String` | | Position of the axis in the chart. Possible values are: `'top'`, `'left'`, `'bottom'`, `'right'` | |
| 18 | | `offset` | `Boolean` | `false` | If true, extra space is added to the both edges and the axis is scaled to fit into the chart area. This is set to `true` for a category scale in a bar chart by default. | |
| 19 | | `id` | `String` | | The ID is used to link datasets and scale axes together. [more...](#axis-id) | |
| 20 | | `gridLines` | `Object` | | Grid line configuration. [more...](../styling.md#grid-line-configuration) | |
| 21 | | `scaleLabel` | `Object` | | Scale title configuration. [more...](../labelling.md#scale-title-configuration) | |
| 22 | | `ticks` | `Object` | | Tick configuration. [more...](#tick-configuration) | |
| 23 | ||
| 24 | ## Tick Configuration | |
| 25 | The following options are common to all cartesian axes but do not apply to other axes. | |
| 26 | ||
| 27 | | Name | Type | Default | Description | |
| 28 | | -----| ---- | --------| ----------- | |
| 29 | | `autoSkip` | `Boolean` | `true` | If true, automatically calculates how many labels that can be shown and hides labels accordingly. Turn it off to show all labels no matter what | |
| 30 | | `autoSkipPadding` | `Number` | `0` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled. *Note: Only applicable to horizontal scales.* | |
| 31 | | `labelOffset` | `Number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the y direction for the x axis, and the x direction for the y axis). *Note: this can cause labels at the edges to be cropped by the edge of the canvas* | |
| 32 | | `maxRotation` | `Number` | `90` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. *Note: Only applicable to horizontal scales.* | |
| 33 | | `minRotation` | `Number` | `0` | Minimum rotation for tick labels. *Note: Only applicable to horizontal scales.* | |
| 34 | | `mirror` | `Boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. *Note: Only applicable to vertical scales.* | |
| 35 | | `padding` | `Number` | `10` | Padding between the tick label and the axis. When set on a vertical axis, this applies in the horizontal (X) direction. When set on a horizontal axis, this applies in the vertical (Y) direction. | |
| 36 | ||
| 37 | ## Axis ID | |
| 38 | The properties `dataset.xAxisID` or `dataset.yAxisID` have to match the scale properties `scales.xAxes.id` or `scales.yAxes.id`. This is especially needed if multi-axes charts are used. | |
| 39 | ||
| 40 | ```javascript | |
| 41 | var myChart = new Chart(ctx, { | |
| 42 | type: 'line', | |
| 43 | data: { | |
| 44 | datasets: [{ | |
| 45 | // This dataset appears on the first axis | |
| 46 | yAxisID: 'first-y-axis' | |
| 47 | }, { | |
| 48 | // This dataset appears on the second axis | |
| 49 | yAxisID: 'second-y-axis' | |
| 50 | }] | |
| 51 | }, | |
| 52 | options: { | |
| 53 | scales: { | |
| 54 | yAxes: [{ | |
| 55 | id: 'first-y-axis', | |
| 56 | type: 'linear' | |
| 57 | }, { | |
| 58 | id: 'second-y-axis', | |
| 59 | type: 'linear' | |
| 60 | }] | |
| 61 | } | |
| 62 | } | |
| 63 | }); | |
| 64 | ``` | |
| 65 | ||
| 66 | # Creating Multiple Axes | |
| 67 | ||
| 68 | With cartesian axes, it is possible to create multiple X and Y axes. To do so, you can add multiple configuration objects to the `xAxes` and `yAxes` properties. When adding new axes, it is important to ensure that you specify the type of the new axes as default types are **not** used in this case. | |
| 69 | ||
| 70 | In the example below, we are creating two Y axes. We then use the `yAxisID` property to map the datasets to their correct axes. | |
| 71 | ||
| 72 | ```javascript | |
| 73 | var myChart = new Chart(ctx, { | |
| 74 | type: 'line', | |
| 75 | data: { | |
| 76 | datasets: [{ | |
| 77 | data: [20, 50, 100, 75, 25, 0], | |
| 78 | label: 'Left dataset', | |
| 79 | ||
| 80 | // This binds the dataset to the left y axis | |
| 81 | yAxisID: 'left-y-axis' | |
| 82 | }, { | |
| 83 | data: [0.1, 0.5, 1.0, 2.0, 1.5, 0], | |
| 84 | label: 'Right dataset', | |
| 85 | ||
| 86 | // This binds the dataset to the right y axis | |
| 87 | yAxisID: 'right-y-axis', | |
| 88 | }], | |
| 89 | labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'] | |
| 90 | }, | |
| 91 | options: { | |
| 92 | scales: { | |
| 93 | yAxes: [{ | |
| 94 | id: 'left-y-axis', | |
| 95 | type: 'linear', | |
| 96 | position: 'left' | |
| 97 | }, { | |
| 98 | id: 'right-y-axis', | |
| 99 | type: 'linear', | |
| 100 | position: 'right' | |
| 101 | }] | |
| 102 | } | |
| 103 | } | |
| 104 | }); | |
| 105 | ``` | |
