Category Axis

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`		Position of the axis. more…
`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’`, or `‘end’`.
`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.

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