KendoUI Tester - Chart label rotation

by rodneyhickman

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 id="burnDownChart" class="freaking-awsome-burndown-cart" ></div>

CSS

.freaking-awsome-burndown-cart { height: 300px; width: 500px; }
body { background-color: black; background-image: url('http://www.klasresearch.com/content/images/shared/backgrounds/black_pattern12.jpg')}

JavaScript

$("#burnDownChart").kendoChart({
    theme: $(document).data("kendoSkin") || "default",
    chartArea: {
        background: "transparent"
    },
    legend: {
        position: "bottom",
        labels: {
            // set the font to a size of 14px
            font: "14px Arial,Helvetica,sans-serif",
            // set the color to red
            color: "white"
        },
    },
    seriesDefaults: {
        missingValues: "interpolate",
        labels: {
            color: "white",
        }
    },
    axisDefaults: {
        labels: {
            color: "white",
        }
    },
    series: [
        {
        type: "area",
        data: [90, 92, 85, 50, 45, 80, 75, 60, 42, 40, 75, 60, 50, 55, 43, 45, 12],
        aggregate: "sum",
        name: "Remaining Assignments",
        color: "greenYellow"},
    {
        type: "area",
        data: [90, 12, 5, 5, 5, 23, 5, 8, 25, 2, 50, 1, 30, 10, 20, 5, 2],
        aggregate: "sum",
        name: "New Assigments",
        color: "tomato",
        },
    {
        type: "bar",
        data: [8, 12, 5, 5, 5, 5, 5, 5, 8, 7, 3, 12, 6, 3, 3, 4, 2],
        name: "# Closed",
        color: "darkOrange",
        labels: {
            template: "#= value #",
            visible: true,
            color: "white",
            opacity: 0,
        }},
    {
        type: "line",
        data: [190, , , , , , , , , , , , , , , ,, , , , , 0],
        name: "Ideal",
        color: "white",
        width: 2,
        size: 2,
        markers: {
            background: "white",
        },
        dashType: "dot"}
    ],
    categoryAxis: {
        categories: ["Sprint1", , , , , "Spint 2", , , , , "Sprint 3", , , , "Sprint 4", , , , , "Sprint 5"],
        majorGridLines: {
            visible: false
        },
        minorGridLines: {
            visible: false
        },

    },
    valueAxis: {
        majorGridLines: {
            visible: false
        },
        minorGridLines: {
            visible: false
        },

    }
});