Legend

Map colors to meaning. The inline .casca-legend sits under any chart; the grid-based .casca-legend-row adds a truncating label and a right-aligned chip rail, and can be a <button> or <a> when a row should filter or link. Color is always paired with a text label.

Inline legend

Revenue

Costs

Profit

<div class="casca-legend">
  <div class="casca-legend-item">
    <span class="casca-legend-swatch" style="--_color: var(--casca-color-1)"></span>
    Revenue
  </div>
</div>

Legend rows (label + chip rail)

Products

$45k ↑ 12%

Services, this label truncates with an ellipsis when long

$28k ↓ 3%

<div class="casca-legend-row">
  <span class="casca-legend-swatch" style="--_color: var(--casca-color-1)"></span>
  <span class="casca-legend-row-label">Products</span>
  <div class="casca-legend-row-rail">
    <span class="casca-chip">$45k</span>
    <span class="casca-chip" data-variant="success">↑ 12%</span>
  </div>
</div>

<!-- interactive: swap the wrapper for a <button> or <a> -->
<a href="#category" class="casca-legend-row"> … </a>