New to Kendo UI for jQuery? Start a free 30-day trial

CategoryAxis

configuration

The category axis configuration options.

categoryAxis

Array

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        categories: ["A", "B", "C", "D", "E"],
        color: "#ff0000",
        visible: true
    }
});
</script>

categoryAxis.autoBaseUnitSteps

Object

Specifies the discretebaseUnitStepvalues when eitherbaseUnitis set to "fit" orbaseUnitStepis set to "auto".

The default configuration is as follows:

minutes: [1, 2, 5, 15, 30]
hours: [1, 2, 3, 6, 12]
days: [1, 2, 3]
weeks: [1, 2]
months: [1, 2, 3, 6]
years: [1, 2, 3, 5, 10, 25, 50]

Each setting can be overriden individually.

$("#sparkline").kendoSparkline({
    categoryAxis: {
        categories: [
            new Date("2012/02/01 00:00:00"),
            new Date("2012/02/02 00:00:00"),
            new Date("2012/02/20 00:00:00")
        ],
        baseUnitStep: "auto",
        autoBaseUnitSteps: {
            days: [3]
        }
    },
    ...
});

categoryAxis.axisCrossingValue

Object | Date | Array

Category index at which the first value axis crosses this axis. (Only for object)

Category indicies at which the value axes cross the category axis. (Only for array)

**Note:**Specify an index greater than or equal to the number of categories to denote the far end of the axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        axisCrossingValue: 2,
        categories: ["A", "B", "C", "D", "E"]
    }
});
</script>

categoryAxis.baseUnit

String

The base time interval for the axis. The default baseUnit is determined automatically from the minimum difference between subsequent categories. Available options:

minutes
hours
days
weeks
months
years

*fit

SettingbaseUnitto "fit" will set such base unit andbaseUnitStep that the total number of categories does not exceedmaxDateGroups.

Series data is aggregated for the specified base unit by using the series.aggregatefunction.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        baseUnit: "days",
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/02"),
            new Date("2023/01/03"),
            new Date("2023/01/04")
        ]
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

categoryAxis.baseUnitStep

Object

Sets the step (interval) between categories in base units. Specifiying "auto" will set the step to such value that the total number of categories does not exceedmaxDateGroups.

This option is ignored ifbaseUnitis set to "fit".

Default: 1

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        baseUnit: "days",
        baseUnitStep: 2,
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/03"),
            new Date("2023/01/05"),
            new Date("2023/01/07")
        ]
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

categoryAxis.categories

Array

Array of category names.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        categories: ["Q1", "Q2", "Q3", "Q4", "Q5"]
    }
});
</script>

categoryAxis.color

String

Color to apply to all axis elements. Any valid CSS color string will work here, including hex and rgb. Individual color settings for line and labels take priority.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        color: "#ff0000"
    }
});
</script>

categoryAxis.crosshair

Object

The crosshair configuration options.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        crosshair: {
            visible: true,
            color: "red",
            width: 2,
            opacity: 0.8,
            dashType: "dash"
        },
        categories: ["Q1", "Q2", "Q3", "Q4"]
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

categoryAxis.field

String

The data field containing the category name.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    dataSource: {
        data: [
            { category: "Q1", value: 1 },
            { category: "Q2", value: 2 },
            { category: "Q3", value: 3 }
        ]
    },
    categoryAxis: {
        field: "category"
    },
    series: [{
        field: "value"
    }]
});
</script>

categoryAxis.justified

Boolean

Positions categories and series points on major ticks. This removes the empty space before and after the series.

This option is ignored if either bar or column series are plotted on the axis.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        justified: true
    }
});
</script>

categoryAxis.labels

Object

Configures the axis labels.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        labels: {
            visible: true,
            color: "#ff0000",
            font: "12px Arial"
        }
    }
});
</script>

categoryAxis.line

Object

Configures the axis line. This will also effect major and minor ticks, but not gridlines.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        line: {
            color: "#ff0000",
            width: 2,
            visible: true
        }
    }
});
</script>

categoryAxis.majorGridLines

Object

Configures the major grid lines. These are the lines that are an extension of the major ticks through the body of the chart.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        majorGridLines: {
            color: "#ff0000",
            width: 2,
            visible: true
        }
    }
});
</script>

categoryAxis.majorTicks

Object

The major ticks of the axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        majorTicks: {
            size: 8,
            color: "#ff0000",
            width: 2,
            visible: true
        }
    }
});
</script>

The last date displayed on the axis. By default, the minimum date is the same as the last category. This is often used in combination with theminandroundToBaseUnitconfiguration options to set up a fixed date range.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        max: new Date("2023/03/31"),
        categories: [
            new Date("2023/01/01"),
            new Date("2023/02/01"),
            new Date("2023/03/01")
        ]
    },
    series: [{
        data: [10, 15, 8]
    }]
});
</script>

categoryAxis.maxDateGroups

Number

Specifies the maximum number of groups (categories) to produce when eitherbaseUnitis set to "fit" orbaseUnitStepis set to "auto".

Default: 10

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        baseUnit: "fit",
        maxDateGroups: 5,
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/15"),
            new Date("2023/02/01"),
            new Date("2023/02/15"),
            new Date("2023/03/01"),
            new Date("2023/03/15")
        ]
    },
    series: [{
        data: [10, 15, 8, 12, 6, 9]
    }]
});
</script>

categoryAxis.maxDivisions

Number

The maximum number of ticks and labels to display. Applicabable for date category axis.

This option is ignored in all other cases.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        maxDivisions: 3,
        categories: [
            new Date("2023/01/01"),
            new Date("2023/02/01"),
            new Date("2023/03/01"),
            new Date("2023/04/01"),
            new Date("2023/05/01")
        ]
    },
    series: [{
        data: [10, 15, 8, 12, 6]
    }]
});
</script>

categoryAxis.min

Object

The first date displayed on the axis. By default, the minimum date is the same as the first category. This is often used in combination with themaxandroundToBaseUnitconfiguration options to set up a fixed date range.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        min: new Date("2022/12/01"),
        categories: [
            new Date("2023/01/01"),
            new Date("2023/02/01"),
            new Date("2023/03/01")
        ]
    },
    series: [{
        data: [10, 15, 8]
    }]
});
</script>

categoryAxis.minorGridLines

Object

Configures the minor grid lines. These are the lines that are an extension of the minor ticks through the body of the chart.

Note that minor grid lines are not visible by default, therefore none of these settings will take effect with the minor grid lines visibility being set totrue.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        minorGridLines: {
            color: "#ff0000",
            width: 1,
            visible: true
        }
    }
});
</script>

categoryAxis.minorTicks

Object

The minor ticks of the axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        minorTicks: {
            size: 5,
            color: "#ff0000",
            width: 2,
            visible: true
        }
    }
});
</script>

categoryAxis.name

String

The unique axis name.

Default: "primary"

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        name: "customCategoryAxis"
    }
});
</script>

categoryAxis.notes

Object

The category axis notes configuration.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        notes: {
            position: "top",
            icon: {
                background: "red",
                size: 10
            },
            label: {
                text: "Important note"
            },
            data: [{
                value: "Q2",
                text: "Peak quarter"
            }]
        },
        categories: ["Q1", "Q2", "Q3", "Q4"]
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

categoryAxis.plotBands

Array

The plot bands of the category axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        plotBands: [{
            from: 1,
            to: 3,
            color: "#ff0000",
            opacity: 0.3
        }]
    }
});
</script>

categoryAxis.reverse

Boolean

Reverses the axis direction - categories are listed from right to left and from top to bottom.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        reverse: true
    }
});
</script>

categoryAxis.roundToBaseUnit

Boolean

By default, the first and last dates will be rounded off to the nearest base unit. Specifyingfalsefor this option will disable this behavior.

This option is most useful in combination with explicitminandmaxdates.

It will be ignored if either bar or column series are plotted on the axis.

Default: true

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        roundToBaseUnit: false,
        min: new Date("2023/01/15"),
        max: new Date("2023/03/15"),
        categories: [
            new Date("2023/01/01"),
            new Date("2023/02/01"),
            new Date("2023/03/01")
        ]
    },
    series: [{
        data: [10, 15, 8]
    }]
});
</script>

categoryAxis.title

Object

The title of the category axis.

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    data: [1, 2, 3, 4, 5],
    categoryAxis: {
        title: {
            text: "Categories",
            color: "#ff0000",
            font: "14px Arial"
        }
    }
});
</script>

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/02"),
            new Date("2023/01/03")
        ]
    },
    series: [{
        data: [10, 15, 8]
    }]
});
</script>

categoryAxis.visible

Boolean

The visibility of the axis.

Default: false

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        visible: true,
        categories: ["Q1", "Q2", "Q3", "Q4"]
    },
    series: [{
        data: [10, 15, 8, 12]
    }]
});
</script>

categoryAxis.weekStartDay

Number

Specifies the week start day whenbaseUnitis set to "weeks". Use the kendo.days constants to specify the day by name.

kendo.days.Sunday (0)
kendo.days.Monday (1)
kendo.days.Tuesday (2)
kendo.days.Wednesday (3)
kendo.days.Thursday (4)
kendo.days.Friday (5)
kendo.days.Saturday (6)

Default: kendo.days.Sunday

<div id="sparkline"></div>
<script>
$("#sparkline").kendoSparkline({
    categoryAxis: {
        type: "date",
        baseUnit: "weeks",
        weekStartDay: kendo.days.Monday,
        categories: [
            new Date("2023/01/01"),
            new Date("2023/01/08"),
            new Date("2023/01/15")
        ]
    },
    series: [{
        data: [10, 15, 8]
    }]
});
</script>

Related Members