search

ChartsCSS / charts.css

Open source CSS framework for data visualization.
https://ChartsCSS.org
MIT License
6.2k stars 176 forks source link

Line chart shows full line at size: 0 and no line at size: 1. I would suggest showing half the line in both situations #56

Open rognstad opened 3 years ago

rognstad commented 3 years ago

First, I want to say that the library is cool and thank you for your work!

I'm using it for a line chart that often has 100% values (i.e. --size: 1). This is awkward because the line isn't rendered at all in that case. The clip-path polygon evaluates to 100% * (1 - 1), which of course 0. I do see that this ends up showing the full line at --size: 0, so it's good that is visible. I'd suggest showing half the line at both extremes, though.

Changing the clip-path value to this does the trick:

clip-path: polygon(
    0 calc(100%*(1 - var(--start, var(--size))) + (.5 * var(--line-size))),
    100% calc(100%*(1 - var(--size)) + (.5 * var(--line-size))),
    100% calc(100%*(1 - var(--size)) - (.5 * var(--line-size))),
    0 calc(100%*(1 - var(--start, var(--size))) - (.5 * var(--line-size)))
)

Here's a demonstration: https://codepen.io/rognstad/pen/ZEKVeNm?editors=110

I'd be happy to submit a PR if this sounds useful to you. Thanks!