06-01-2018 07:53
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

06-01-2018 07:53
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
- Who Voted for this post?
How to change "stroke-width" property of line via javascript?
I tried
let items = document.getElementsByClassName("dial");
items.forEach(function(item) {
item.style['stroke-width'] = 3;
item.style.strokeWidth = 3;
});
but it did not work. Any pointers?
06-30-2018 23:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post


06-30-2018 23:16
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I can't crack it, either. Seems like a bug.
Gondwana Software

07-01-2018 04:59
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-01-2018 04:59
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
I think the stroke and fill properties are not changeable via JS.

07-12-2018 14:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

07-12-2018 14:13
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
As per the documentation:
The Fitbit rendering engine does not support the CSS stroke or border properties. To achieve a similar effect you need to draw two overlapping shapes.
The larger background shape should be filled with the desired border color, and the smaller foreground shape should be filled with the desired foreground color.

10-21-2022 15:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

10-21-2022 15:10
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
It appears this does work now, not sure what SDK version this was fixed but as of SDK 6.1 the stroke width can be changed via .style.strokeWidth in js
let myLine = document.getElementById("my-line");
myLine.style.strokeWidth = 10;

