billboard.js
billboard.js copied to clipboard
naver
flashing gauge is a visual irritant
When you update the gauge frequently it will blink/flicker/flash on each update. Such flashing is visually irritating for many folks and unnecessary unless there is a need to call attention to the update (charts don't flash when they get updated, tho)
I put https://github.com/naver/billboard.js/blob/fad9e86fa172cb14a2cc6f2fb8418e72a5932192/src/ChartInternal/shape/arc.ts#L827
opacity to 1 to remove the flashing, but perhaps it should be an option in the gauge config. I haven't encountered any issues with this, but there could be implications I am missing.
if you think, by adding an option or the update can improve, contributing to the project will be a best option.
The opacity=0 set there, is to make smooth gauge text value transition.
Checkout the below example, where the 30.0%/38.0% area w/opacity, texts are fading-out and fading-in after data toggle.
w/o opacity, texts looks moving its position after the data toggle.
| opacity=0 | w/o opacity |
|---|---|
 |
 |
This is an odd use case for a gauge. The point of the gauge is generally meant to be a single value on most chart frameworks, like the speed in a car. The above would be better off as one of the other charts.
When I use it with a single value, I didn't encounter the visual artifact you mentioned. And, tbh I prefer that over flashing which I find very distracting.
Other frameworks don't flash the text when updating their gauge I've noticed.
https://developers.google.com/chart/interactive/docs/gallery/gauge
@blazespinnaker well everyone's needs aren't same.
In this case just providing as an option(ex. gauge.opacity) can be a solution.
True enough, however I imagine you'll find that the opinion of flashing and blinking is fairly universal when it comes to ux style guides.