IE 8 Axis Label Rotation.

ie8rotationissue.js

//Unable to parse
//var data =[{"records":"[{\"category\":\"doc4\",\"value\":1},{\"category\":\"heute rating dokument2\",\"value\":2},{\"category\":\"rating Dokument1\",\"value\":1}]","singleChartAxes":"{\"yAxesTitle\":\"Bewertung3_single\",\"maxNumberOfCounts\":2}","ratingTooltip":"{\"ratingTooltip\":\"merci\"}"}];

//manually converterted into vars
var jsonValues = [{"category":"doc4","value":1},{"category":"heute rating dokument2","value":2},{"category":"rating Dokument1","value":1}],
    chartAxesObject = {"yAxesTitle":"Bewertung3_single","maxNumberOfCounts":2},
    jsonRatingTooltip = {ratingTooltip:"merci"};

    //Chart Legend
    var myLegend = {
        position : "bottom",
        width : 150,
        height : 150,
        styles : {
            padding: {
                top: 12,
                right: 12,
                bottom: 12,
                left: 12
            },
            gap:20, // Abstand Legende zum Chart

            marker:{
                width:6,
                height:6
            }
        }
    };

    //Chart Tooltip
    var myTooltip = {
        styles : {
            backgroundColor : "#333",
            color : "#eee",
            borderColor : "#fff",
            textAlign : "center"
        },

        markerLabelFunction: function(categoryItem, valueItem, itemIndex, series, seriesIndex)
        {
            var msg = document.createElement("div"),
                underlinedTextBlock = document.createElement("span"),
                boldTextBlock = document.createElement("div");
            underlinedTextBlock.style.textDecoration = "underline";
            boldTextBlock.style.marginTop = "5px";
            boldTextBlock.style.fontWeight = "bold";
            valueItem.displayName = "Anzahl der Bewertungen ";
            underlinedTextBlock.appendChild(document.createTextNode(valueItem.displayName + " für " + 
                                            categoryItem.axis.get("labelFunction").apply(this, ["'"+jsonRatingTooltip.ratingTooltip+"'", categoryItem.axis.get("labelFormat")])));
            boldTextBlock.appendChild(document.createTextNode(valueItem.axis.get("labelFunction").apply(this, [valueItem.value])));   
            msg.appendChild(underlinedTextBlock);
            msg.appendChild(document.createElement("br"));
            msg.appendChild(boldTextBlock); 
            return msg; 
        }
    };

    //Chart Axes
    var myAxes = {
        yAxis : {
            keys : [ "value" ],
            type : "numeric",
            position : "left",
            title : chartAxesObject.yAxesTitle, //add a title
            roundingMethod: 1,
            alwaysShowZero:true,
            styles : {  
                majorUnit: {
                    //determinant:"count",
                    //count: jsonMajorUnitCounts.maxNumberOfCounts + 1
                },
                //style a title
                title: {   
                    fontSize: "15px",
                    margin : {
                        right : 15
                    }
                }
            }
        },
        xAxis : {
            keys : [ "category" ],
            position : "bottom",
            type : "category",
            //title: "Date Range",   //add a title
            styles : {
                majorTicks : {
                    display : "none"
                },
                majorUnit : {
                //count : 3,
                //distance : 20
                },

                 title: {                        //style a title
                     fontSize: "15px"
                 },

                label : {
                    rotation:-45,
                    color: "#ff0000"
                }
            }
        }
    };

    //Instantiate the chart
    mychart = new Y.Chart({
        dataProvider : jsonValues,
        axes:myAxes,
        tooltip: myTooltip,
        legend : myLegend,
        type : "column",
        height : 400,
        width : 500

    });

    //render the chart
    mychart.render("#singleRatingColumnChart");

    mychart.on('markerEvent:click', function(e) {
        alert(e.categoryItem.value);
    });
});