naver / billboard.js

📊 Re-usable, easy interface JavaScript chart library based on D3.js
https://naver.github.io/billboard.js/
MIT License
5.83k stars 351 forks source link

[Feature] Option to enforce integer svg width/height #2208

Open adschm opened 3 years ago

adschm commented 3 years ago

When using animations (e.g. blinking via @keyframes), Chromium will blur the chart which is particularly visible for text.

An easy solution is to enforce integer width/height. (inspired by [1])

Thus, adding an option to round the svg size to the nearest integer (or doing this by default) would be desirable to have sharp plots.

Blurred (automatic width: 497.328125):

image

Sharp (manual width: 497):

image

Note that the referenced article is different from my experiment:

[1] https://www.blackpepper.co.uk/blog/blurry-css-animations-in-chrome-try-this

netil commented 3 years ago

@adschm, maybe rendering hint can mitigate this.