Animate stroke-width with Highcharts renderer

Question

I'm using Highcharts SVG rendering API (Renderer) to draw custom chart and I want to animate rect's stroke-width attribute. Here is the example provided in Highcharts documentation, but it seems not working properly - all attributes are changed except stroke-width.
If I open HTML in Chrome DevTools I can see something like that:

<rect x="50" y="50" width="200" height="20" rx="5" ry="5" stroke="gray"
stroke-width="2" fill="silver" zIndex="3" strokeWidth="10"></rect>

Stroke-width is set using camel-style name, not dash-style name.

May be there is some workaround?

Answer 1

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