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

XAxis.labels.rotation

configuration

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

xAxis.labels.rotation

Number|String|Object

Default: 0

<div id="chart"></div>
<script>
$("#chart").kendoChart({
  series: [
    { type: "scatter", data: [[1, 2]] }
  ],
  xAxis: {
    labels: {
      rotation: 90
    }
  }
});
</script>

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      {
        type: "scatter",
        data: [
          [new Date("01/01/2013"), 2],
          [new Date("01/02/2013"), 2],
          [new Date("01/03/2013"), 2]
        ]
      }
    ],
    xAxis: {
      type: "date",
      labels: {
        rotation: "auto",
        format: "F"
      }
    }
  });
</script>

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.

Default: "end"

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      {
        type: "scatter",
        data: [
          [new Date("01/01/2013"), 2],
          [new Date("01/02/2013"), 2],
          [new Date("01/03/2013"), 2]
        ]
      }
    ],
    xAxis: {
      type: "date",
      labels: {
        rotation: {
          angle: -45,
          align: "center"
        }
      }
    }
  });
</script>

xAxis.labels.rotation.angle

Number|String

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

Default: 0

<div id="chart"></div>
<script>
  $("#chart").kendoChart({
    series: [
      { type: "scatter", data: [[1, 2]] }
    ],
    xAxis: {
      labels: {
        rotation: {
          angle: 90
        }
      }
    }
  });
</script>

XAxis.labels.rotation

xAxis.labels.rotation

xAxis.labels.rotation.align

xAxis.labels.rotation.angle