Flex chart
HTML
<div class="row">
<div class="bar-container">
<div class="bar val-a" style="flex-basis: 1%">
<div class="text">Ini 1 %</div>
</div>
<div class="bar val-b" style="flex-basis: 89%">
<div class="text">Ini 89 %</div>
</div>
<div class="bar val-c" style="flex-basis: 10%">
<div class="text">Ini 10 %</div>
</div>
</div>
</div>
CSS
.row {
display: flex;
align-items: stretch;
}
.row .label {
flex: 0 0 120px;
}
.row .bar-container {
flex: 1;
display: flex;
align-items: stretch;
justify-content: center;
position: relative;
height: 80px;
border-radius: 20px;
overflow: hidden;
}
.row .bar {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.text {
text-overflow: ellipsis;
}
.text.partially-hidden {
color: yellow;
}
.val-a { background: salmon }
.val-b { background: wheat }
.val-c { background: honeydew }
JAVASCRIPT
// Get all the text elements
const textElements = document.querySelectorAll('.text');
// Check if each text element has overflowing text
textElements.forEach((element) => {
const isOverflowing =element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth
if (isOverflowing) {
element.classList.add('partially-hidden');
}
});
