KendoUI Tester - Chart label rotation

by whoamiwho

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<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">
<div style="padding:20px;">
    <div id="divChart"></div>
</div>

JavaScript

jQuery('#divChart').kendoChart({
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate"
    },
    legend: {
        position: "bottom"
    },
    tooltip: {
        visible: true,
        format: "{0}%"
    },
    valueAxis: {
        min: 70,
        max: 90,
        plotBands: [{
            from: 70,
            to: 75,
            color: "#f5f5f5"
        }, {
            from: 80,
            to: 85,
            color: "#f5f5f5"
        }, {
            from: 90,
            to: 95,
            color: "#f5f5f5"
        }]
    },
    series: [{
        type: "line",
        name: "Epic EpicCare Ambulatory EMR",
        color: "#00000",
        width: 3,
        markers: {
            background: "RED"
        },
        tooltip: {
            visible: true,
            template: "<b>Epic EpicCare Ambulatory EMR</b><br/>Current Score: #= value #<br/>#= category # "
        },
        labels: {
            visible: true
        },
        data: [88.71, 88.87, 88.91, 89.39, 89.44, 89.47, 89.39, 89.38, 89.25, 88.81, 88.9, 88.84, 88.79]
    }, {
        type: "line",
        name: " Ambulatory EMR",
        color: "#da7633",
        width: 1,
        markers: {
            background: "#red"
        },
        tooltip: {
            visible: true,
            template: "<b> Ambulatory EMR</b><br/>Current Score: #= value #<br/>#= category # "
        },
        data: [75.9, 75.58, 75.54, 75.19, 74.9, 74.42, 74.51, 74.72, 74.55, 74.44, 74.15, 73.86, 73.79]
    }],
    categoryAxis: {
        labels: {
            rotation: -45,
            step: 1,
            skip: 0
        },
        categories: ["Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar", "Apr"]
    }
});