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

CategoryAxis

configuration

The category axis configuration options.

categoryAxis

Array|Object

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"],
    title: {
      text: "Quarters"
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    categories: ["2012", "2013"],
    color: "#ff0000"
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.autoBaseUnitSteps

Object

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

The axis will try to divide the active period into successively larger intervals. It will start from x-second intervals, where x is picked from the autoBaseUnitSteps.seconds array. Then it will move to minutes, seconds and so on. This will continue until the number of intervals is less than maxDateGroups.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    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]
        }
    }
});
</script>

categoryAxis.axisCrossingValue

Object|Date|Array

Category index at which the first value axis crosses this axis (when set as an object).

Category indices at which the value axes cross the category axis (when set as an array).

Set an index greater than or equal to the number of categories to denote the far end of the axis.

If the Chart uses multiple panes, the crossing values are not scoped to a pane. To be able to customize the crossing values in a given pane, you first need to provide placeholder values for the previous pane axes and then the crossing values for the current pane.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"],
    axisCrossingValue: [0, 2]
  },
  valueAxis: [{}, {}],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      { data: [1, 7, 5, 3] },
      { data: [1, 2, 3, 4], axis: "bottom-2" },
      { data: [10, 20, 13, 14], axis: "bottom-2" }
    ],
    valueAxis: [
      { pane: "top-pane" },
      { pane: "bottom-pane", name: "bottom-1" },
      { pane: "bottom-pane", name: "bottom-2" }
    ],
    panes: [
      { name: "top-pane" },
      { name: "bottom-pane" }
    ],
    categoryAxis: [{
      pane: "top-pane",
      categories: [2000, 2001, 2002, 2003]
    },{
      axisCrossingValues: [0, 0, 10000],
      categories: [2002, 2003, 2004, 2005],
      pane: "bottom-pane"
    }]
  });
</script>

categoryAxis.background

String

The background color of the axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"],
    background: "#ff0000"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</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.

The supported values are:

"fit"
"milliseconds"
"seconds"
"minutes"
"hours"
"days"
"weeks"
"months"
"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.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2012/02/01"),
      new Date("2012/02/02"),
      new Date("2012/02/03")
    ],
    baseUnit: "days"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.baseUnitStep

Number|String

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="chart"></div>
<script>
$("#chart").kendoChart({
  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: 3 // Displays a category for every 3 days.
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.categories

Array

The category names. The chart will create a category for every item of the array.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.color

String

The color to apply to all axis elements. Accepts a valid CSS color string, including hex and rgb. Can be overridden by categoryAxis.labels.color and categoryAxis.line.color.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"],
    color: "#aa00bb"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"],
    color: "rgb(128, 0, 255)"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [ "2012", "2013"],
    color: "green"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.crosshair

Object

The crosshair configuration options.

The crosshair is displayed when the categoryAxis.crosshair.visible option is set to true.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    crosshair: {
      color: "green",
      width: 2,
      visible: true
    }
  },
  series: [{
    type: "line",
    data: [1, 2, 3]
  }]
});
</script>

categoryAxis.field

String

The data item field which contains the category name. Requires the dataSource option to be set. The field name should be a valid Javascript identifier and should contain only alphanumeric characters (or "$" or "_"), and may not start with a digit.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    field: "year"
  },
  series: [
    { field: "value" }
  ],
  dataSource: [
    { year: "2012", value: 1 },
    { year: "2013", value: 2 }
  ]
});
</script>

categoryAxis.highlight

Object

The highlight configuration options for the category axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    highlight: {
      visible: true,
      color: "#ff0000",
      opacity: 0.2
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.justified

Boolean

If set to true the chart will position categories and series points on major ticks. This removes the empty space before and after the series.

The default value is false except for "area", "verticalArea", "rangeArea" and "verticalRangeArea".

This option is ignored if the series.type option is set to "bar", "column", "boxPlot", "ohlc", "candlestick" or "waterfall".

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    justified: true,
    categories: ["2012", "2013"]
  }],
  series: [
    { type: "line", data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.labels

Object

The axis labels configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    labels: {
      background: "green",
      color: "white"
    },
    categories: ["2012", "2013"]
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.line

Object

The configuration of the axis lines. Also affects the major and minor ticks, but not the grid lines.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    line: {
      color: "#aa00bb",
      width: 3
    },
    categories: ["2011", "2012", "2013"]
  },
  series: [{
    data: [1, 2, 3]
  }]
});
</script>

categoryAxis.majorGridLines

Object

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    majorGridLines: {
      width: 3,
      color: "green"
    },
    categories: ["2011", "2012", "2013"]
  }],
  series: [{
    data: [1, 2, 3]
  }]
});
</script>

categoryAxis.majorTicks

Object

The configuration of the category axis major ticks.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    majorTicks: {
      size: 6,
      color: "green",
      width: 5
    },
    categories: ["2012", "2013"]
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.max

Object

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }],
    categoryAxis: {
        type: "date",
        categories: [new Date(2023, 0, 1), new Date(2023, 0, 15), new Date(2023, 0, 30)],
        max: new Date(2023, 1, 1)
    }
});
</script>

categoryAxis.maxDateGroups

Number

The maximum number of groups (categories) to display when categoryAxis.baseUnit is set to "fit" or categoryAxis.baseUnitStep is set to "auto".

Default: 10

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
    }],
    categoryAxis: {
        type: "date",
        categories: [
            new Date(2023, 0, 1), new Date(2023, 1, 1), new Date(2023, 2, 1),
            new Date(2023, 3, 1), new Date(2023, 4, 1), new Date(2023, 5, 1),
            new Date(2023, 6, 1), new Date(2023, 7, 1), new Date(2023, 8, 1),
            new Date(2023, 9, 1), new Date(2023, 10, 1), new Date(2023, 11, 1)
        ],
        maxDateGroups: 5
    }
});
</script>

categoryAxis.maxDivisions

Number

The maximum number of ticks, labels and grid lines to display. Applicable for date category axis. You can combine this property with a bigger value of the maxDateGroups property to increase the number of rendered data points in the Chart without drawing too many labels, ticks, and grid lines.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }],
    categoryAxis: {
        type: "date",
        categories: [
            new Date(2023, 0, 1), new Date(2023, 0, 2), new Date(2023, 0, 3),
            new Date(2023, 0, 4), new Date(2023, 0, 5), new Date(2023, 0, 6),
            new Date(2023, 0, 7), new Date(2023, 0, 8), new Date(2023, 0, 9),
            new Date(2023, 0, 10)
        ],
        maxDivisions: 5
    }
});
</script>

####Example

<div id="chart"></div>
<script>
  function createChart() {
    $("#chart").kendoChart({
      dataSource: {
        transport: {
          read: {
            url: "https://demos.telerik.com/service/v2/core/StockData",
            contentType: "application/json"
          }
        },
        schema: {
          model: {
            fields: {
              Date: {
                type: "date"
              }
            }
          }
        }
      },
      seriesDefaults: {
        type: "line"
      },
      series: [{
        field: "Open",
        categoryField: "Date"
      }],
      categoryAxis: {
        maxDivisions: 20,
        labels: {
          rotation: -45
        }
      },
      tooltip: {
        visible: true,
        format: "C2"
      },
      pannable: true,
      zoomable: true
    });
  }

  $(document).ready(createChart);
</script>

categoryAxis.min

Object

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
    series: [{
        data: [1, 2, 3]
    }],
    categoryAxis: {
        type: "date",
        categories: [new Date(2023, 0, 1), new Date(2023, 0, 15), new Date(2023, 0, 30)],
        min: new Date(2022, 11, 15)
    }
});
</script>

categoryAxis.minorGridLines

Object

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    minorGridLines: {
      width: 3,
      color: "green"
    },
    categories: ["2012", "2013"]
  }],
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.minorTicks

Object

The configuration of the category axis minor ticks.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    minorTicks: {
      visible: true,
      size: 6,
      color: "green",
      width: 5
    },
    categories: ["2011", "2012", "2013"]
  }],
  series: [{
    data: [1, 2, 3]
  }]
});
</script>

categoryAxis.name

String

The unique axis name. Used to associate a series with a category axis using the series.categoryAxis option.

Important

Using multiple category axes requires setting an explicit name for each of them.

Default: "primary"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [
    { name: "month", categories: [ "Jan", "Feb", "Mar" ] },
    { name: "year", categories: [ 2012 ] }
  ],
  series: [
    { categoryAxis: "month", data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.notes

Object

The category axis notes configuration.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["Q1", "Q2", "Q3", "Q4"],
    notes: {
      position: "top",
      icon: {
        background: "red",
        size: 15
      },
      label: {
        text: "Note",
        position: "outside"
      },
      line: {
        dashType: "dash"
      }
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.pane

String

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

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { data: [1,2,3] },
    { data: [1,2,3,4],
      axis: "secondValueAxis",
      categoryAxis: "secondCategoryAxis"
    }
  ],
  panes:[
    { name: "topPane" },
    { name: "bottomPane" }
  ],
  valueAxis: [
    { pane: "topPane" },
    { name: "secondValueAxis", pane: "bottomPane" }
  ],
  categoryAxis: [
    { pane: "topPane" },
    { name: "secondCategoryAxis", pane: "bottomPane" }
  ]
});
</script>

categoryAxis.plotBands

Array

The plot bands of the category axis.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    plotBands: [
      { from: 1, to: 2, color: "red" }
    ]
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.rangeLabels

Object

The configuration of the date axis date range labels.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    type: "date",
    justified: true,
    baseUnit: "days",
    rangeLabels: {
      format: "d",
      visible: true
    },
    labels: {
      format: "M-d"
    }
  },
  series: [{
    type: 'line',
    field: 'value',
    categoryField: 'date',
    data: [{
      value: 1,
      date: new Date("2012/01/01")
    }, {
      value: 2,
      date: new Date("2012/01/04")
    }, {
      value: 3,
      date: new Date("2012/01/07")
    }]
  }]
});
</script>

categoryAxis.reverse

Boolean

If set to true the category axis direction will be reversed. By default categories are listed from left to right and from bottom to top.

Default: false

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    categories: ["2012", "2013"],
    reverse: true
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.roundToBaseUnit

Boolean

If set to true the chart will round the first and last date to the nearest base unit.

The roundToBaseUnit option will be ignored if series.type is set to "bar", "column", "boxPlot", "ohlc", "candlestick" or "waterfall".

Default: true

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    categories: [
      new Date("2012/01/15"),
      new Date("2012/02/15"),
      new Date("2012/03/15")
    ],
    roundToBaseUnit: false
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.select

Object

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

The range is index based, starting from 0. Categories with indexes in the range [select.from, select.to) will be selected. That is, the last category in the range will not be included in the selection.

If the categories are dates, the range must also be specified with date values.

Selection is only supported if the axis is horizontal.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis:  {
    select: {
      from:1,
      to: 2,
      max: 3
    }
  },
  series: [
    { data: [1, 2, 3, 4] }
  ]
});
</script>

categoryAxis.startAngle

Number

The angle (degrees) of the first category on the axis.

Angles increase clockwise and zero is to the left. Negative values are acceptable.

Default: 90

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [ {
    type: "radarLine",
    data: [ 1, 2, 3 ]
  }],
  categoryAxis: {
    startAngle: 180
  }
});
</script>

categoryAxis.title

Object

The title configuration of the category axis.

The categoryAxis.title.text option must be set in order to display the title.

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: ["2012", "2013"],
    title: {
      text: "Years",
      background: "green",
      border: {
        width: 1,
      }
    }
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.type

String

The category axis type.

The supported values are:

"category" - discrete category axis.
"date" - specialized axis for displaying chronological data.

Default: "category"

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2011/12/20"),
      new Date("2011/12/21")
    ],
    type: "date"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      "Seats",
      "Cars",
      "People"
    ],
    type: "category"
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.visible

Boolean

If set to true the chart will display the category axis. By default the category axis is visible.

Default: true

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2011/12/20"),
      new Date("2011/12/21")
    ],
    visible: false
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

categoryAxis.weekStartDay

Number

The week start day when categoryAxis.baseUnit is set to "weeks".

The supported values are:

kendo.days.Sunday - equal to 0
kendo.days.Monday - equal to 1
kendo.days.Tuesday - equal to 2
kendo.days.Wednesday - equal to 3
kendo.days.Thursday - equal to 4
kendo.days.Friday - equal to 5
kendo.days.Saturday - equal to 6

Default: kendo.days.Sunday

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
      new Date("2023/10/01"),
      new Date("2023/10/08"),
      new Date("2023/10/15")
    ],
    baseUnit: "weeks",
    weekStartDay: kendo.days.Monday
  },
  series: [
    { data: [1, 2, 3] }
  ]
});
</script>

Related Members