Animate the stroke width using Highcharts rendering

Question

I am using the high-quality SVG rendering API (Renderer) to draw a custom chart, and I want to animate the line-width attribute of the stroke. Here is an example presented in the Highcharts documentation, but it seems to be inoperative - all attributes are changed except for the stroke width.
If I open HTML in Chrome DevTools, I can see something like this:

<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> 

The stroke width is specified using the camel's style name, not the style name.

Maybe there is a workaround?

Answer 1

Yes, 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.

But I think this is a good point to report, perhaps as an API error?

In any case, 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, adjusted JSFIDDLE

---

VERSION 2

Based on your comment, I am editing the code. In this case, you will also set the stroke width animation. This is a simple solution. Another solution would be to configure the original Highcharts library, which I would not recommend. Anyway, hope this 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(); }); 

Duration can be adjusted to suit your needs. See here in action: JSFIDDLE