KendoUI Tester - Chart label rotation

by sergiu079

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.datavis.min.css">
<script src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
<div>
    <div id='chart'></div>
</div>

JavaScript

function createChart() {
    $("#chart").kendoStockChart({
        theme: $(document).data("kendoSkin") || "default",
        title: {
            text: "Internet Users"
        },
        navigator: {
            type: 'area',
            series: [{
                name: "United States",
                data: [67.96, 68.93, 75, 74, 78, 67.96, 68.93, 75, 74, 78, 67.96, 68.93, 75, 74, 78]}]
        },
        valueAxis: {
            labels: {
                format: "{0}%"
            }
        },
        categoryAxis: {
            categories: [2005, 2006, 2007, 2008, 2009]
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        }
    });
}

$(document).ready(function () {
    setTimeout(function () {
        // Initialize the chart with a delay to make sure
        // the initial animation is visible
        createChart();

        $("#example").bind("kendo:skinChange", function (e) {
            createChart();
        });
    }, 400);
});