Highchart renderer image rotation is not working in IE10

Question

I need to add an image in highchart and then need to rotate it on different angles.

Here is the example: http://jsfiddle.net/peZfm/

And the rotation code:

chart.renderer
    .image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30)
    .css({
        '-webkit-transform': 'rotate( 50deg)',
        "-webkit-transform-origin": "center center",
        'transform': 'rotate(50deg)',
        "transform-origin": "center center",
        '-ms-transform': 'rotate(50deg)',
        "-ms-transform-origin": "center center",
    })
    .add();

The problem is, image rotation is working on Chrome, Mozilla but not working on IE10.

Is there a way to fix it?

Answer 1

You can use attr() and rotation paramter: http://jsfiddle.net/peZfm/3/

chart.renderer.image('http://graphs2.stormgeo.com/Images/Arrows/layout%202/0/test.png', 100, 100, 30, 30) .attr({
        rotation:40
    })
        .add();