search

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

Regions are poorly rendered #3790

Closed Blaumaus closed 2 months ago

Blaumaus commented 4 months ago

On a line chart, regions are often poorly rendered (not as a straight line):

Screenshot 2024-05-29 at 19 35 36 Screenshot 2024-05-29 at 19 35 54

It's not a massive bug, but it catches an eye and spoils the UI a tiny bit.

There's also one more extreme example:

Screenshot 2024-05-29 at 19 37 41

Regions seem to be much more "clunky" compared to a regular line near them.

Could you please advice, maybe there's some kind of option I missed that may fix this? Or maybe some sort of shape-rendering: geometricprecision may be applied on regions to render them a bit better?

Thank you for building this beautiful library. All the best!

netil commented 4 months ago

Hi @Blaumaus, thanks for the cheering message. The apply of regions can make to render specific range as dashed is implemented as moving point and drawing line commands. And between these commands(and its coordinate) can possibly be overlapped, as your example.

One of the workaround or trick is rendering multiple dataseries separately, by dividing as normal and dashed. And control dashed line with CSS style rather than path commands. It'll get more clear by checking below example.