Area Chart

A line chart with a filled region: a <polygon> marked data-area draws the translucent fill (down to the baseline) and a <polyline> traces the top edge. Both share a --color; fill opacity is --casca-line-area-opacity. The chart is aria-hidden with a .casca-data alternative. No JavaScript.

Single area

Markup

<div class="casca">
  <div class="casca-title">Revenue Growth</div>
  <table class="casca-data"><!-- accessible rows --></table>

  <div class="casca-line" aria-hidden="true">
    <svg viewBox="0 0 100 100" class="casca-line-svg" preserveAspectRatio="none">
      <!-- polygon[data-area] = the fill down to the baseline; polyline = the edge -->
      <polygon points="0,100 0,75 33,65 66,55 100,40 100,100" data-area
               style="--color: var(--casca-color-3)" />
      <polyline points="0,75 33,65 66,55 100,40"
                style="--color: var(--casca-color-3)" />
    </svg>
    <div class="casca-line-labels"><span class="casca-line-label">Q1</span> <!-- ... --></div>
  </div>
</div>