Bar Chart

Read-only, CSS-only bars. Each bar's height is its --value (a percentage of the track) and its fill is --color. Labels and the hidden .casca-data table carry the meaning, so the bars are aria-hidden. No JavaScript. Full variants (grouped, stacked, diverging) in the API docs.

Single series

Per-category color

Markup

<div class="casca casca-figure">
  <div class="casca-title">Monthly Sales</div>

  <!-- Accessible data alternative; the bars are aria-hidden -->
  <table class="casca-data">
    <caption>Monthly sales</caption>
    <tbody>
      <tr><th scope="row">Jan</th><td>$65k</td></tr>
      <!-- ...one row per bar... -->
    </tbody>
  </table>

  <div class="casca-bar" aria-hidden="true">
    <div class="casca-bar-group" data-grid>
      <div class="casca-bar-item">
        <div class="casca-bar-value"
             style="--value: 65%; --color: var(--casca-color-1)"
             data-label="$65k"></div>
      </div>
      <!-- ...one .casca-bar-item per bar... -->
    </div>
    <div class="casca-bar-labels">
      <span class="casca-bar-label">Jan</span>
      <!-- ... -->
    </div>
  </div>
</div>

Always-visible values

Add data-labels="always" to show each value without hover, so the numbers are visible on touch, in print, and on a static no-JS page. The default stays hover-only.

Ranked list (top N)

Horizontal orientation + data-labels="always" + a leading .casca-bar-label per row gives the common analytics “top N” view: each row reads label · bar · value, and the numbers print without any interaction.

Markup (ranked list)

<!-- horizontal + a leading label and a REAL value per row, so it reads
     "label … value" even with the stylesheet off -->
<div class="casca-bar" data-orientation="horizontal" data-labels="always"
     style="--casca-height: auto" aria-hidden="true">
  <div class="casca-bar-group">
    <div class="casca-bar-item">
      <span class="casca-bar-label">Organic search</span>
      <div class="casca-bar-value" style="--value: 100%"></div>
      <span class="casca-bar-rank-value">4,200</span>
    </div>
    <!-- ...one row per item, sorted descending... -->
  </div>
</div>