Overlapping data spans in stacked column charts

[chartscss]

Overlapping data spans in stacked column charts

[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!