Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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 this issue Aug 9, 2021 · 0 comments

Comments

@rognstad
Copy link

rognstad commented Aug 9, 2021

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant