[Solved]-Animate stroke-width with Highcharts renderer-Highcharts

Yep, there is a workaround. You can achieve this by using the attr() function of jQuery. When you click on the rectangle you change the stroke-width attribute.

Still I think this is a good point to report perhaps as a bug of the API?

Anyways the JS code will look like this:

$(function () {
    var renderer = new Highcharts.Renderer(
            $('#container')[0],
            400,
            300
        ),
        rect = renderer.rect(100, 100, 100, 100, 5)
            .attr({
                'stroke-width': 2,
                stroke: 'gray',
                fill: 'silver',
                zIndex: 3
            })
            .on('click', function () {
                rect.animate({
                    x: 50,
                    y: 50,
                    width: 200,
                    height: 20
                })
                $("rect").attr("stroke-width", "30"); // here you can change the stroke-width               
            })
            .add();
});

To see it in action here the adjusted JSFIDDLE

VERSION 2

Based on your comment I edit the code. In this case you set also an animation for the stroke-width. This is a simple solution. Another solution would be tweaking the original Highcharts library which I would not recommend. Anyways, hope it helps:

$(function () {
    var renderer = new Highcharts.Renderer(
            $('#container')[0],
            400,
            300
        ),
        rect = renderer.rect(100, 100, 100, 100, 5)
            .attr({
                'stroke-width': 2,
                stroke: 'gray',
                fill: 'silver',
                zIndex: 3
            })
            .on('click', function () {
                rect.animate({
                    x: 50,
                    y: 50,
                    width: 200,
                    height: 20
                })
                $("rect").animate(
                    { "stroke-width": "10" },
                    {
                        duration: 500, 
                        step: function(now) { $(this).attr("stroke-width", now); }
                    });                
            })
            .add();
});

The duration can be adjusted to what is suitable for you. See it in action here: JSFIDDLE