Series Toggle

Tick a chip to show or hide a line. It is a real <input type="checkbox"> plus :has() — no JavaScript. Hidden lines keep their slot (no layout shift), and the remaining lines keep their colors. Try unchecking one.

Visitors by channel

Monthly visitors (thousands) by channel
Month	Direct	Search	Social
Jan	22	45	10
Mar	38	50	16
May	32	60	20
Jul	50	56	18
Sep	58	70	28

Direct Search Social

Markup

<div class="casca">
  <fieldset class="casca-toggles">
    <label class="casca-toggle">
      <span class="casca-toggle-box">
        <input type="checkbox" class="casca-toggle-input" value="1" checked>
      </span>
      <span class="casca-toggle-label">
        <span class="casca-toggle-swatch" style="--_color: var(--casca-color-1)"></span>
        Revenue
      </span>
    </label>
    <!-- ...one per series; value matches the polyline's data-series... -->
  </fieldset>

  <div class="casca-line" aria-hidden="true">
    <svg viewBox="0 0 100 100" class="casca-line-svg" preserveAspectRatio="none">
      <polyline data-series="1" points="..." style="--color: var(--casca-color-1)" />
    </svg>
  </div>
</div>