categoryAxis.labels Object

Configures the axis labels.

categoryAxis.labels.background String

The background color of the labels. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.border Object

The border of the labels.

categoryAxis.labels.border.color String(default: "black")

The color of the border. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.border.dashType String(default: "solid")

The dash type of the border.

"solid"

Specifies a solid line.

"dot"

Specifies a line consisting of dots.

"dash"

Specifies a line consisting of dashes.

"longDash"

Specifies a line consisting of a repeating pattern of long-dash.

"dashDot"

Specifies a line consisting of a repeating pattern of dash-dot.

"longDashDot"

Specifies a line consisting of a repeating pattern of long-dash-dot.

"longDashDotDot"

Specifies a line consisting of a repeating pattern of long-dash-dot-dot.

categoryAxis.labels.border.width Number(default: 0)

The width of the border.

categoryAxis.labels.color String

The text color of the labels. Any valid CSS color string will work here, including hex and rgb.

categoryAxis.labels.font String(default: "12px Arial,Helvetica,sans-serif")

The font style of the labels.

categoryAxis.labels.format String

The format of the labels.

categoryAxis.labels.margin Number | Object(default: 0)

The margin of the labels.

Example

    // sets the top, right, bottom and left margin to 3px.
    margin: 3


    // sets the top and left margin to 1px
    // margin right and bottom are with 0px (by default)
    margin: { top: 1, left: 1 }

categoryAxis.labels.mirror Boolean

Mirrors the axis labels and ticks. If the labels are normally on the left side of the axis, mirroring the axis will render them to the right.

categoryAxis.labels.padding Number | Object(default: 0)

The padding of the labels.

Example

    // sets the top, right, bottom and left padding to 3px.
    padding: 3


    // sets the top and left padding to 1px
    // padding right and bottom are with 0px (by default)
    padding: { top: 1, left: 1 }

categoryAxis.labels.rotation Number(default: 0)

The rotation angle of the labels.

categoryAxis.labels.skip Number(default: 1)

Number of labels to skip. Skips rendering the first n labels.

categoryAxis.labels.step Number(default: 1)

Label rendering step. Every n-th label is rendered where n is the step

categoryAxis.labels.template String | Function

The template which renders the labels.

The fields which can be used in the template are:

  • value - the category value
  • dataItem - the data item, in case a field has been specified

Example

<div id="chart"></div>
<script>
// chart initialization
$("#chart").kendoChart({
     title: {
         text: "My Chart Title"
     },
     series: [{
         name: "Series 1",
         data: [200, 450, 300, 125]
     }],
     categoryAxis: {
         categories: [2000, 2001, 2002, 2003],
         labels: {
             // labels template
             template: "Year: #= value #"
         }
     }
});
</script>

categoryAxis.labels.visible Boolean(default: true)

The visibility of the labels.

In this article