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

State.categoryAxis.labels

configuration

The axis labels configuration.

state.categoryAxis.labels

Object

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                color: "#666",
                font: "11px Arial",
                format: "{0:MMM}",
                rotation: 30,
                visible: true
            }
        }
    }
});
</script>

state.categoryAxis.labels.color

String

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

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                color: "#ff0000"
            }
        }
    }
});
</script>

state.categoryAxis.labels.font

String

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

Default: "12px Arial,Helvetica,sans-serif"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                font: "14px 'Times New Roman'"
            }
        }
    }
});
</script>

state.categoryAxis.labels.format

String

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

Default: "{0}"

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                format: "{0:MMM yyyy}"
            }
        }
    }
});
</script>

state.categoryAxis.labels.rotation

Number|String

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.

Default: 0

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                rotation: 45
            }
        }
    }
});
</script>

state.categoryAxis.labels.visible

Boolean

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

Default: true

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        categoryAxis: {
            labels: {
                visible: false
            }
        }
    }
});
</script>