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

Monthly Sales

Revenue in thousands

Monthly sales (revenue in thousands)
Month	Revenue
Jan	$65k
Feb	$80k
Mar	$45k
Apr	$90k
May	$72k
Jun	$55k

Per-category color

Revenue by Channel

Revenue by channel
Channel	Revenue
Direct	$82k
Search	$74k
Social	$61k
Email	$53k
Partner	$48k
Referral	$39k

Markup

<div class="casca">
  <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.

Monthly sales

Monthly sales ($k)
Jan	65
Feb	80
Mar	45
Apr	90
May	72
Jun	55

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.

Traffic by source

Sessions by source
Organic search	4,200
Direct	3,100
Referral	1,800
Social	1,200
Email	600

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>