Chart — Vanilla

Bar chart with vanilla HTML and Rizzo CSS. BEM: chart, chart__bars, chart__bar-wrap, chart__bar, chart__label.

Chart

Simple bar chart using Rizzo CSS classes. Use --chart-bar-fill to override bar color. For dynamic data, use JS to set style="height: X%" on each .chart__bar.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<!-- Rizzo CSS. BEM: chart, chart__bars, chart__bar-wrap, chart__bar, chart__label. -->
<div class="chart" role="img" aria-label="Bar chart">
  <div class="chart__bars">
    <div class="chart__bar-wrap"><div class="chart__bar" style="height: 40%;"></div><span class="chart__label">A</span></div>
    <div class="chart__bar-wrap"><div class="chart__bar" style="height: 65%;"></div><span class="chart__label">B</span></div>
    <div class="chart__bar-wrap"><div class="chart__bar" style="height: 30%;"></div><span class="chart__label">C</span></div>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React