KendoUI Tester - Chart label rotation

by Amir Sharifian

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  >
    <div id='chart'  ></div>
</div>

JavaScript

jQuery(function() {

    jQuery('#chart').kendoChart({
        title: {
            text: "Overall Score out of 100",
            align: "left",
            font: "18px Arial, Verdana, sans-serif",
            color: "#444"
        },
        seriesDefaults: {
            type: "line",
            missingValues: "interpolate",
            
        },
        legend: {
            position: "bottom"
        },
        tooltip: {
            visible: true,
            format: "{0}%"
        },
        valueAxis: {
            min: 70,
            max: 85,
            plotBands: [{
                from: 70,
                to: 75,
                color: "#EDF5FF"},
            {
                from: 80,
                to: 85,
                color: "#EDF5FF"}]
        },
        series: [{
            name: "Some Product",
            color: "004990",
            tooltip: {
                visible: true,
                template: "<b>Some Product</b><br/>Current Score: #= value #<br/>#= category # "
            },
            data: [81.82, 81.82, 81.82, null, null, null, null, null, null, null, null, 70.42, 72.37]},
        {
            name: "Some Market Segmemt",
            color: "da7633",
            tooltip: {
                visible: true,
                template: "<b>Some Market Segmemt</b><br/>Current Score: #= value #<br/>#= category # "
            },
            data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
        categoryAxis: {
            labels: {
                rotation: -45,
                step: 1,
                skip: 0
            },
            categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
        }
    });

});