Overlapping data spans in stacked column charts

[msmart]

Thanks for the framework!

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

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]

@msmart I need the HTML+CSS to help you.

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

[msmart]

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>

[ramiy]

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

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

[msmart]

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