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

Avoid spacing in area charts #123

Open
jaimeiniesta opened this issue Feb 26, 2024 · 1 comment
Open

Avoid spacing in area charts #123

jaimeiniesta opened this issue Feb 26, 2024 · 1 comment

Comments

@jaimeiniesta
Copy link

Area charts sometimes show a very thin vertical spacing between the columns. It seems to depend on the viewport width, screen resolution and amount of data, but I think that the idea with an area chart is that it's seen as a single block (unless some data-spacing-* is specified), right?

For example, in https://chartscss.org/charts/area/ I see this:

Captura de pantalla 2024-02-26 a las 13 01 57

How can this be polished so no spacing is shown?

@piotr-cz
Copy link

piotr-cz commented Aug 9, 2024

Nasty workaround:

 .charts-css.area:not(.reverse):not(.reverse-data) tbody tr td::before {
-  clip-path: polygon(0% calc(100% * (1 - var(--start, var(--end, var(--size))))), 100% calc(100% * (1 - var(--end, var(--size)))), 100% 100%, 0% 100%)
+  clip-path: polygon(0% calc(100% * (1 - var(--start, var(--end, var(--size))))), 105% calc(100% * (1 - var(--end, var(--size)))), 105% 100%, 0% 100%)
 }

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

2 participants