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.

Sign up for GitHub

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

Jump to bottom

Overlapping data spans in stacked column charts #25

Closed
msmart opened this issue Mar 26, 2021 · 4 comments
Closed

Overlapping data spans in stacked column charts #25

msmart opened this issue Mar 26, 2021 · 4 comments

Comments

@msmart
Copy link

msmart commented Mar 26, 2021

Thanks for the framework!

Any advice on how to deal with overlapping data spans? e.g.
image

It would be great to have them vertically stacked on top of each other to ensure readability.

I didnt find any option for this in the docs.

Thanks for any hints!
@ramiy
Copy link
Collaborator

ramiy commented Mar 26, 2021

@msmart I need the HTML CSS to help you.

See more info about stacked charts at https://chartscss.org/components/stacked/

@msmart
Copy link
Author

msmart commented Mar 27, 2021

The overlap happens in cases there is one dominating data point. See example below. This is not a bug. It's expected behavior. But I was just wondering what the common workaround for this situation would be to ensure readability of the data information.

<table class="charts-css column multiple show-data-on-hover show-heading show-labels show-primary-axis show-3-secondary-axes data-spacing-10 stacked" style="height:200px">
        <tbody>
           <tr>
                <th scope="row">21-02-08</th>
                    <td style="--size: calc( 496/ 515 )"><span class="data">496</span></td>
                    <td style="--size: calc( 10/ 515 )"><span class="data">10</span></td>
                    <td style="--size: calc( 3/ 515 )"><span class="data">3</span></td>
                    <td style="--size: calc( 2/ 515 )"><span class="data">2</span></td>
            </tr>
            </tbody>
 </table>

image

@ramiy
Copy link
Collaborator

ramiy commented Mar 28, 2021

I would do this differently, replace your .data element with a .tooltip.

But because you are using .stacked chart it won't work.

@msmart
Copy link
Author

msmart commented Mar 29, 2021

thanks for your support! This worked for our use case!

@msmart msmart closed this as completed Mar 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@msmart @ramiy