Back to all docs
API Reference / dataviz / ui / StockChart / categoryAxis
New to Kendo UI for jQuery? Start a free 30-day trial

CategoryAxis

configuration

The category axis configuration options.

categoryAxis

Array
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        field: "date",
        labels: {
            format: "MMM yyyy"
        },
        majorGridLines: {
            visible: true
        }
    }
});
</script>

categoryAxis.autoBaseUnitSteps

Object

The discrete categoryAxis.baseUnitStep values when either categoryAxis.baseUnit is set to "fit" or categoryAxis.baseUnitStep is set to "auto".

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
        
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date"
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
          baseUnitStep: "auto",
            	autoBaseUnitSteps: {
            	days: [3]
        	},
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

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.

pseudo
    $("#stock-chart").kendoStockChart({
         categoryAxis: {
             categories: ["A", "B"],
             axisCrossingValue: [0, 100]
         },
         valueAxis: [{ }, { name: "secondary" }]
    });

categoryAxis.background

String

The background color of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        background: "lightblue"
    },
    series: [{
        type: "line",
         data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
    }]
});
</script>

categoryAxis.baseUnit

String

The base time interval for the date axis. The default base unit is determined automatically from the minimum difference between subsequent categories.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        baseUnit: "days"
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</script>

The supported values are:

  • "days"
  • "fit"
  • "hours"
  • "minutes"
  • "months"
  • "weeks"
  • "years"

Setting baseUnit to "fit" will set such base unit and categoryAxis.baseUnitStep that the total number of categories does not exceed categoryAxis.maxDateGroups.

Series data is aggregated for the specified base unit using the series.aggregate function.

categoryAxis.baseUnitStep

Object

The step (interval) between categories in base units. Setting it to "auto" will set the step to such value that the total number of categories does not exceed categoryAxis.maxDateGroups.

This option is ignored if categoryAxis.baseUnit is set to "fit".

Default: 1

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        baseUnitStep: 2
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 15 },
            { date: new Date(2023, 0, 4), value: 25 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        color: "green"
    }
});
</script>

categoryAxis.crosshair

Object

The crosshair configuration options.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        crosshair: {
            visible: true,
            color: "red",
            width: 2
        }
    },
    series: [{
        type: "line",
         data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 25 },
            { date: new Date(2023, 0, 3), value: 15 }             
        ],
    }]
});
</script>

categoryAxis.field

String

The data field containing the category name.

<div id="chart"></div>
<script>

// assuming the following data...
var data = [ { sales: 200, year: 2005 }, { sales: 300, year: 2006 }, { sales: 400, year: 2007 }];
// specify the "year" as the field for the category axis
$("#chart").kendoChart({
    dataSource: {
        data: data
    },
    categoryAxis: {
        field: "year"
    }
});
</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 column, ohlc or candlestick series are plotted on the axis.

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        justified: true
    }
});
</script>

categoryAxis.labels

Object

Configures the axis labels.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        labels: {
            color: "red",
            font: "12px Arial",
            rotation: 45
        }
    }
});
</script>

categoryAxis.line

Object

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

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        line: {
            color: "#ff6800",
            width: 3,
            visible: true
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        majorGridLines: {
            visible: true,
            color: "#cccccc",
            width: 1
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.majorTicks

Object

The major ticks of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        majorTicks: {
            visible: true,
            color: "#ff6800",
            size: 6
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.max

Object

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 the min and roundToBaseUnit configuration options to set up a fixed date range.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        max: new Date(2023, 11, 31)
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 5, 1), value: 20 },
            { date: new Date(2023, 11, 1), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</script>

categoryAxis.maxDateGroups

Number

Specifies the maximum number of groups (categories) to produce when either baseUnit is set to "fit" or baseUnitStep is set to "auto".

This option is ignored in all other cases.

The default value is approximately equal to [widget width, px] / 30

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        maxDateGroups: 10
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 1, 1), value: 20 },
            { date: new Date(2023, 2, 1), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</script>

categoryAxis.maxDivisions

Number

The maximum number of ticks and labels to display.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        maxDivisions: 5
    },
    series: [{
        type: "line",
         data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 20 },
            { date: new Date(2023, 0, 3), value: 25 },
            { date: new Date(2023, 0, 4), value: 35 },
            { date: new Date(2023, 0, 5), value: 45 },
            { date: new Date(2023, 0, 6), value: 35 },
            { date: new Date(2023, 0, 7), value: 15 },
            { date: new Date(2023, 0, 8), value: 60 },
           
        ],
    }]
});
</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 the max and roundToBaseUnit configuration options to set up a fixed date range.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        min: new Date(2023, 0, 1)
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 5, 1), value: 20 },
            { date: new Date(2023, 11, 1), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</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.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        minorGridLines: {
            visible: true,
            color: "#f0f0f0",
            width: 1
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

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 to true.

categoryAxis.minorTicks

Object

The minor ticks of the axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        minorTicks: {
            visible: true,
            color: "#ff6800",
            size: 4
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.name

String

The unique axis name.

Default: "primary"

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        name: "mainCategory"
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.notes

Object

The category axis notes configuration.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: "2012/01/01", open: 10, high: 15, low: 8, close: 12, volume: 1000 },
            { date: "2012/01/02", open: 12, high: 18, low: 10, close: 16, volume: 1500 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        notes: {
            data: [{ value: new Date("2012/01/01"), text: "Important date" }],
            icon: {
                background: "red",
                size: 10
            }
        }
    },
    series: [{
        type: "candlestick",
        openField: "open",
        highField: "high",
        lowField: "low",
        closeField: "close"
    }]
});
</script>

categoryAxis.pane

String

The name of the pane that the axis should be rendered in. The axis will be rendered in the first (default) pane if not set.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        pane: "bottom"
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.plotBands

Array

The plot bands of the category axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 },
            { date: new Date("2012/01/04"), close: 330, volume: 55000 },
            { date: new Date("2012/01/05"), close: 340, volume: 60000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        plotBands: [{
            from: new Date("2012/01/02"),
            to: new Date("2012/01/04"),
            color: "#ffcccc",
            opacity: 0.5
        }]
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.reverse

Boolean

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

Default: false

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        reverse: true
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.roundToBaseUnit

Boolean

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

This option is most useful in combination with explicit min and max dates.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        roundToBaseUnit: false,
        min: new Date(2023, 0, 15),
        max: new Date(2023, 0, 25)
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 16), value: 10 },
            { date: new Date(2023, 0, 18), value: 20 },
            { date: new Date(2023, 0, 24), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</script>

It will be ignored if either column, ohlc or candlestick series are plotted on the axis.

categoryAxis.select

Object

The selected axis range. If configured, axis selection will be enabled.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 },
            { date: new Date("2012/01/04"), close: 330, volume: 55000 },
            { date: new Date("2012/01/05"), close: 340, volume: 60000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        select: {
            from: new Date("2012/01/02"),
            to: new Date("2012/01/04")
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.title

Object

The title of the category axis.

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    dataSource: {
        data: [
            { date: new Date("2012/01/01"), close: 300, volume: 40000 },
            { date: new Date("2012/01/02"), close: 310, volume: 50000 },
            { date: new Date("2012/01/03"), close: 320, volume: 45000 }
        ]
    },
    dateField: "date",
    categoryAxis: {
        title: {
            text: "Date",
            color: "#ff6800",
            font: "16px Arial"
        }
    },
    series: [{
        type: "candlestick",
        field: "close"
    }]
});
</script>

categoryAxis.type

String

The axis type.

"category"

Discrete category axis.

"date"

Specialized axis for displaying chronological data.

Default: "category"

<div id="stockChart"></div>
<script>
  $(document).ready(function () {
  // Sample local stock data
    var stockData = [
        { date: new Date(2024, 0, 1), open: 150.25, high: 152.80, low: 149.50, close: 152.30 },
        { date: new Date(2024, 0, 2), open: 152.50, high: 154.20, low: 151.80, close: 153.75 },
        { date: new Date(2024, 0, 3), open: 153.80, high: 155.40, low: 152.90, close: 154.20 },
        
    ];

    $("#stockChart").kendoStockChart({
        series: [{
            type: "candlestick",
            data: stockData, // Data passed directly to series
            openField: "open",
            highField: "high",
            lowField: "low",
            closeField: "close",
            dateField: "date", // Specify date field for category axis
            name: "Stock Price"
        }],
        navigator: {
        	series: {
        	    type: "candlestick", 
        	    data: stockData, // Navigator needs its own data reference
        	    field: "close", // Use closing price for navigator
        	    dateField: "date"
        	},
        	select: {
        	    from: new Date(2024, 0, 10), // Initial selection start
        	    to: new Date(2024, 0, 20)    // Initial selection end
        	}
        },
        categoryAxis: {
          type: "date",
        	baseUnit: "days",
        	labels: {
        	    format: "MMM dd"
        	}
        },
        valueAxis: {
        	labels: {
        	    format: "${0}"
        	}
        }
    });
});
</script>

categoryAxis.visible

Boolean

The visibility of the axis.

Default: true

<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        visible: false
    },
    series: [{
        type: "line",
         data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 2), value: 25 },
            { date: new Date(2023, 0, 3), value: 15 }             
        ],
    }]
});
</script>

categoryAxis.weekStartDay

Number

Specifies the week start day when baseUnit is 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="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
    categoryAxis: {
        baseUnit: "weeks",
        weekStartDay: kendo.days.Monday
    },
    series: [{
        type: "line",
        data: [
            { date: new Date(2023, 0, 1), value: 10 },
            { date: new Date(2023, 0, 8), value: 20 },
            { date: new Date(2023, 0, 15), value: 15 }
        ],
        field: "value",
        categoryField: "date"
    }]
});
</script>

Related Members

In this article
categoryAxiscategoryAxis.autoBaseUnitStepscategoryAxis.axisCrossingValuecategoryAxis.backgroundcategoryAxis.baseUnitcategoryAxis.baseUnitStepcategoryAxis.colorcategoryAxis.crosshaircategoryAxis.fieldcategoryAxis.justifiedcategoryAxis.labelscategoryAxis.linecategoryAxis.majorGridLinescategoryAxis.majorTickscategoryAxis.maxcategoryAxis.maxDateGroupscategoryAxis.maxDivisionscategoryAxis.mincategoryAxis.minorGridLinescategoryAxis.minorTickscategoryAxis.namecategoryAxis.notescategoryAxis.panecategoryAxis.plotBandscategoryAxis.reversecategoryAxis.roundToBaseUnitcategoryAxis.selectcategoryAxis.titlecategoryAxis.typecategoryAxis.visiblecategoryAxis.weekStartDay
Not finding the help you need?
Contact Support