Category Axis | Chart.js
Description: Open source HTML5 Charts for your website

# # 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.

### # Common options to all cartesian axes

Namespace: `options.scales[scaleId]`

Name | Type | Default | Description
--- | --- | --- | ---
`bounds` | `string` | `'ticks'` | Determines the scale bounds. more...
`position` | `string` | `object` |  | Position of the axis. more...
`stack` | `string` |  | Stack group. Axes at the same `position` with same `stack` are stacked.
`stackWeight` | `number` | 1 | Weight of the scale in stack group. Used to determine the amount of allocated space for the scale within the group.
`axis` | `string` |  | Which type of axis this is. Possible values are: `'x'`, `'y'`. If not set, this is inferred from the first character of the ID which should be `'x'` or `'y'`.
`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 bar chart by default.
`title` | `object` |  | Scale title configuration. more...

### # Common options to all axes

Namespace: `options.scales[scaleId]`

Name | Type | Default | Description
--- | --- | --- | ---
`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.
`alignToPixels` | `boolean` | `false` | Align pixel values to device pixels.
`backgroundColor` | `Color` |  | Background color of the scale area.
`display` | `boolean`|`string` | `true` | Controls the axis global visibility (visible when `true`, hidden when `false`). When `display: 'auto'`, the axis is visible only if at least one associated dataset is visible.
`grid` | `object` |  | Grid line configuration. more...
`min` | `number` |  | User defined minimum number for the scale, overrides minimum value from data. more...
`max` | `number` |  | User defined maximum number for the scale, overrides maximum value from data. more...
`reverse` | `boolean` | `false` | Reverse the scale.
`stacked` | `boolean`|`string` | `false` | Should the data be stacked. more...
`suggestedMax` | `number` |  | Adjustment used when calculating the maximum data value. more...
`suggestedMin` | `number` |  | Adjustment used when calculating the minimum data value. more...
`ticks` | `object` |  | Tick configuration. more...
`weight` | `number` | `0` | The weight used to sort the axis. Higher weights are further away from the chart area.

## # Tick Configuration

### # Common tick options to all cartesian axes

Namespace: `options.scales[scaleId].ticks`

Name | Type | Default | Description
--- | --- | --- | ---
`align` | `string` | `'center'` | The tick alignment along the axis. Can be `'start'`, `'center'`, `'end'`, or `'inner'`. `inner` alignment means align `start` for first tick and `end` for the last tick of horizontal axis
`crossAlign` | `string` | `'near'` | The tick alignment perpendicular to the axis. Can be `'near'`, `'center'`, or `'far'`. See Tick Alignment
`sampleSize` | `number` | `ticks.length` | The number of ticks to examine when deciding how many labels will fit. Setting a smaller value will be faster, but may be less accurate when there is large variability in label length.
`autoSkip` | `boolean` | `true` | If true, automatically calculates how many labels can be shown and hides labels accordingly. Labels will be rotated up to `maxRotation` before skipping any. Turn `autoSkip` off to show all labels no matter what.
`autoSkipPadding` | `number` | `3` | Padding between the ticks on the horizontal axis when `autoSkip` is enabled.
`includeBounds` | `boolean` | `true` | Should the defined `min` and `max` values be presented as ticks even if they are not "nice".
`labelOffset` | `number` | `0` | Distance in pixels to offset the label from the centre point of the tick (in the x-direction for the x-axis, and the y-direction for the y-axis). Note: this can cause labels at the edges to be cropped by the edge of the canvas
`maxRotation` | `number` | `50` | Maximum rotation for tick labels when rotating to condense labels. Note: Rotation doesn't occur until necessary. Note: Only applicable to horizontal scales.
`minRotation` | `number` | `0` | Minimum rotation for tick labels. Note: Only applicable to horizontal scales.
`mirror` | `boolean` | `false` | Flips tick labels around axis, displaying the labels inside the chart instead of outside. Note: Only applicable to vertical scales.
`padding` | `number` | `0` | 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.
`maxTicksLimit` | `number` | `11` | Maximum number of ticks and gridlines to show.

### # Common tick options to all axes

Namespace: `options.scales[scaleId].ticks`

Name | Type | Scriptable | Default | Description
--- | --- | --- | --- | ---
`backdropColor` | `Color` | Yes | `'rgba(255, 255, 255, 0.75)'` | Color of label backdrops.
`backdropPadding` | `Padding` |  | `2` | Padding of label backdrop.
`callback` | `function` |  |  | Returns the string representation of the tick value as it should be displayed on the chart. See callback.
`display` | `boolean` |  | `true` | If true, show tick labels.
`color` | `Color` | Yes | `Chart.defaults.color` | Color of ticks.
`font` | `Font` | Yes | `Chart.defaults.font` | See Fonts
`major` | `object` |  | `{}` | Major ticks configuration.
`padding` | `number` |  | `3` | Sets the offset of the tick labels from the axis
`showLabelBackdrop` | `boolean` | Yes | `true` for radial scale, `false` otherwise | If true, draw a background behind the tick labels.
`textStrokeColor` | `Color` | Yes | `` | The color of the stroke around the text.
`textStrokeWidth` | `number` | Yes | `0` | Stroke width around the text.
`z` | `number` |  | `0` | z-index of tick layer. Useful when ticks are drawn on chart area. Values <= 0 are drawn under datasets, > 0 on top.

## # 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