Overlapping data spans in stacked column charts
msmart opened this issue · comments
@msmart I need the HTML+CSS to help you.
See more info about stacked charts at https://chartscss.org/components/stacked/
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>
I would do this differently, replace your .data
element with a .tooltip
.
But because you are using .stacked
chart it won't work.
thanks for your support! This worked for our use case!