This chart is rendered entirely with HTML and CSS. No JavaScript is required. The bars use width: calc(var(--value) * 1%) to size themselves proportionally. This means the chart works in contexts where JavaScript is unavailable: email clients, RSS readers, print stylesheets, and progressive enhancement scenarios.
This chart renders even with JavaScript completely disabled. Try it: open DevTools, disable JS, and reload.
aria-label attribute with the exact value, making the chart navigable by screen readers. The HTML structure itself is semantic — a screen reader can announce "1,250 pageviews for /home" without any JavaScript intervention. This is a significant advantage over Canvas-based charts, which are opaque bitmaps.
With JavaScript enabled, hovering over a bar shows a tooltip with details. The chart still works without JS — the tooltips are purely additive.
<div class="chart-bar">
<span class="bar-label">/home</span>
<div class="bar-track">
<div class="bar-fill" style="--value: 100"
aria-label="1,250 pageviews">
<span class="bar-value">1,250</span>
</div>
</div>
</div>.bar-fill {
height: 100%;
width: calc(var(--value) * 1%); /* 0-100 maps to 0%-100% */
background: #16a085;
border-radius: 4px;
transition: width 0.6s ease; /* Animate if value changes */
}
.bar-fill:hover {
background: #0e7c6b; /* Darken on hover — CSS only */
}// Populate tooltip content from data attributes
document.querySelectorAll('.js-enhanced .chart-bar').forEach(bar => {
const tooltip = bar.querySelector('.bar-tooltip');
const page = bar.dataset.page;
const views = parseInt(bar.dataset.views).toLocaleString();
const bounce = bar.dataset.bounce;
tooltip.innerHTML = `<strong>${page}</strong><br>`
+ `Views: ${views}<br>`
+ `Bounce: ${bounce}`;
});