← All elements
<div class="bc"><i style="--h:55"><b>M</b></i><i style="--h:80"><b>T</b></i><i style="--h:40"><b>W</b></i><i style="--h:95"><b>T</b></i><i style="--h:65"><b>F</b></i><i style="--h:30"><b>S</b></i><i style="--h:50"><b>S</b></i></div>About this layout
A weekly bar chart whose bars rise from the baseline on load, with heights passed in through a custom property.
How it works
Each bar gets its height from a custom property, --h, written as a percentage in its inline style. A keyframe scales every bar from zero on the Y axis with transform-origin at the bottom, so they grow upward, and each later bar has a slightly bigger animation delay, which makes them rise in a wave.
Ways to customise it
- Change the --h values to your own data.
- Edit the gradient colours on the bars.
- Add a bar by copying an i element and adding a new delay rule.
Good to know
A chart made from divs is invisible to assistive technology, so always provide the numbers in text or a table nearby. The animation is disabled for reduced motion.
Open an example, copy the HTML and the CSS, and paste them into your page. There is nothing to install and no JavaScript to load.