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

State.valueAxis.labels

configuration

The axis labels configuration.

state.valueAxis.labels

Object

<div id="chart-wizard"></div>
<script>
$("#chart-wizard").kendoChartWizard({
    state: {
        valueAxis: {
            labels: {
                color: "#333",
                font: "11px Arial",
                format: "{0:N0}",
                rotation: 0
            }
        }
    }
});
</script>

state.valueAxis.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: {
        valueAxis: {
            labels: {
                color: "#0066cc"
            }
        }
    }
});
</script>

state.valueAxis.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: {
        valueAxis: {
            labels: {
                font: "14px 'Georgia'"
            }
        }
    }
});
</script>

state.valueAxis.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: {
        valueAxis: {
            labels: {
                format: "{0:C2}"
            }
        }
    }
});
</script>

state.valueAxis.labels.rotation

Number|String

The rotation angle (in degrees) of the labels. By default the labels are not rotated. Angles increase clockwise and zero is to the left. Negative values are acceptable. 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: {
        valueAxis: {
            labels: {
                rotation: -45
            }
        }
    }
});
</script>