Category · Chart.js documentation

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

    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: {
                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.

Name | Type | Default | Description
--- | --- | --- | ---
`labels` | `Array[String]` | - | An array of labels to display.
`min` | `String` |  | The minimum item to display. more...
`max` | `String` |  | The maximum item to display. more...

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

    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'
                    }
                }]
            }
        }
    });

# results matching ""

# No results matching ""