categoryAxis.labels Object

The axis labels configuration.

Example - configure the category axis labels

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

categoryAxis.labels.background String

The background color of the labels. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label background as a hex string

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

Example - set the category axis label background as a RGB value

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

Example - set the category axis label background by name

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

categoryAxis.labels.border Object

The border of the labels.

Example - set the category axis label border

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

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

The color of the border. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label border color

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

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

The dash type of the border.

The following dash types are supported:

  • "dash" - a line consisting of dashes
  • "dashDot" - a line consisting of a repeating pattern of dash-dot
  • "dot" - a line consisting of dots
  • "longDash" - a line consisting of a repeating pattern of long-dash
  • "longDashDot" - a line consisting of a repeating pattern of long-dash-dot
  • "longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
  • "solid" - a solid line

Example - set the category axis label border dash type

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

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

The width of the border in pixels. By default the border width is set to zero which means that the border will not appear.

Example - set the category axis label border width

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

categoryAxis.labels.color String

The text color of the labels. Accepts a valid CSS color string, including hex and rgb.

Example - set the category axis label color as a hex string

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

Example - set the category axis label color as a RGB value

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

Example - set the category axis label color by name

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

categoryAxis.labels.culture String

The culture to use when formatting date values. See the globalization overview for more information.

categoryAxis.labels.dateFormats Object

The format used to display labels for date category axis. The {0} placeholder represents the category value.

The chart will choose the appropriate format for the current categoryAxis.baseUnit. Setting the categoryAxis.labels.format option will override the date formats.

See also: kendo.format.

Not supported for radar charts. Use categoryAxis.labels.format instead.

Example - set category axis date formats

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: {
    categories: [
        new Date("2012/01/01"),
        new Date("2012/01/02")
    ],
    type: "date",
    labels: {
      dateFormats: {
        days:"M-d"
      }
    }
  },
  series: [{
    data: [1,2,3]
  }]
});
</script>

categoryAxis.labels.dateFormats.days String (default: "M/d")

The format used when categoryAxis.baseUnit is set to "days".

Example - set the days format

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

categoryAxis.labels.dateFormats.hours String (default: "HH:mm")

The format used when categoryAxis.baseUnit is set to "hours".

Example - set the hours format

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

categoryAxis.labels.dateFormats.months String (default: "MMM 'yy")

The format used when categoryAxis.baseUnit is set to "months".

Example - set the months format

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

categoryAxis.labels.dateFormats.weeks String (default: "M/d")

The format used when categoryAxis.baseUnit is set to "weeks".

Example - set the weeks format

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

categoryAxis.labels.dateFormats.years String (default: "yyyy")

The format used when categoryAxis.baseUnit is set to "years".

Example - set the years format

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

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

The font style of the labels. Accepts a valid CSS color string, for example "20px 'Courier New'".

Example - set the category axis label font

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  categoryAxis: [{
    labels: {
       font: "20px sans-serif",
    },
    categories: ["2011", "2012", "2013"]
  }],
  series: [{
    data: [1, 2, 3]
  }]
});
</script>

categoryAxis.labels.format String (default: "{0}")

The format used to display the labels. Uses kendo.format. Contains one placeholder ("{0}") which represents the category value.

Example - set the category axis label format

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

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

The margin of the labels. A numeric value will set all margins.

Example - set the category axis label margin as a number

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

categoryAxis.labels.margin.bottom Number (default: 0)

The bottom margin of the labels.

Example - set the category axis label bottom margin

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

categoryAxis.labels.margin.left Number (default: 0)

The left margin of the labels.

Example - set the category axis label left margin

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

categoryAxis.labels.margin.right Number (default: 0)

The right margin of the labels.

Example - set the category axis label right margin

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

categoryAxis.labels.margin.top Number (default: 0)

The top margin of the labels.

Example - set the category axis label top margin

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

categoryAxis.labels.mirror Boolean (default: false)

If set to true the chart will mirror 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.

Example - mirror the category axis labels

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

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

The padding of the labels. A numeric value will set all paddings.

Example - set the category axis label padding as a number

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

categoryAxis.labels.padding.bottom Number (default: 0)

The bottom padding of the labels.

Example - set the category axis label bottom padding

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

categoryAxis.labels.padding.left Number (default: 0)

The left padding of the labels.

Example - set the category axis label left padding

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

categoryAxis.labels.padding.right Number (default: 0)

The right padding of the labels.

Example - set the category axis label right padding

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

categoryAxis.labels.padding.top Number (default: 0)

The top padding of the labels.

Example - set the category axis label top padding

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

categoryAxis.labels.position String (default: "onAxis")

The position of the axis labels. By default, labels are positioned next to the axis.

  • When position is set to end, the labels are placed at the end of the crossing axis— typically, at the top or right end of the Chart unless the crossing axis was reversed.
  • When position is set to start, the labels are placed at the start of the crossing axis— typically, at the left or bottom end of the Chart unless the crossing axis was reversed.

Example - position the category axis labels at the start of the value axis

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

categoryAxis.labels.rotation Number|String|Object (default: 0)

The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" if the axis is horizontal in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.

Example - rotate the category axis labels

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

Example - enable auto rotation for the category axis labels

<div id="chart" style="width:200px;"></div>
<script>
  $("#chart").kendoChart({
    categoryAxis: [{
      labels: {
        rotation: "auto"
      },
      categories: ["Category A", "Category B", "Category C"]
    }],
    series: [{
      data: [1, 2, 3]
    }]
  });
</script>

categoryAxis.labels.rotation.align String (default: "end")

The alignment of the rotated labels relative to the slot center. The supported values are "end" and "center". By default the closest end of the label will be aligned to the center. If set to "center", the center of the rotated label will be aligned instead.

Example - align the rotated category axis labels center

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    categoryAxis: [{
      labels: {
        rotation: {
          angle: 45,
          align: "center"
        }
      },
      categories: ["Category A", "Category B", "Category C"]
    }],
    series: [{
      data: [1, 2, 3]
    }]
  });
</script>

categoryAxis.labels.rotation.angle Number|String (default: 0)

The rotation angle of the labels. By default the labels are not rotated. Can be set to "auto" if the axis is horizontal in which case the labels will be rotated only if the slot size is not sufficient for the entire labels.

Example - rotate the category axis labels

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

categoryAxis.labels.skip Number (default: 0)

The number of labels to skip. By default no labels are skipped.

Example - skip category axis labels

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

categoryAxis.labels.step Number (default: 1)

The label rendering step - render every n-th label. By default every label is rendered.

Example - render every odd category axis label

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

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. If the category does not have a corresponding item in the data then an empty object will be passed.
  • format - the default format of the label
  • culture - the default culture (if set) on the label
  • index - the 0-based index of the current label
  • count - the total number of labels on the axis

The text can be split into multiple lines by using line feed characters ("\n").

Example - set the category axis template as a string

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

Example - set the category axis template as a function

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

categoryAxis.labels.visible Boolean (default: true)

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

Example - hide the category axis labels

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

categoryAxis.labels.visual Function

A function that can be used to create a custom visual for the labels. The available argument fields are:

  • createVisual - a function that can be used to get the default visual.
  • culture - the default culture (if set) on the label
  • dataItem - the data item, in case a field has been specified
  • format - the default format of the label
  • options - the label options.
  • rect - the kendo.geometry.Rect that defines where the visual should be rendered.
  • sender - the chart instance (may be undefined).
  • text - the label text.
  • value - the category value

Example - using custom visual for the labels

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    categoryAxis: {
      categories: ["foo bar"],
      labels: {
        visual: function(e) {
          var rect = new kendo.geometry.Rect(e.rect.origin, [e.rect.size.width, 100]);
          var layout = new kendo.drawing.Layout(rect, {
            orientation: "vertical",
            alignContent: "center"
          });
          var words = e.text.split(" ");
          for (var i = 0; i < words.length; i++) {
            layout.append(new kendo.drawing.Text(words[i]));
          }
          layout.reflow();
          return layout;
        }
      }
    },
    series: [{
      data: [1]
    }]
  });
</script>
In this article
Related articles
Not finding the help you need? Improve this article