Line Chart

An SVG <polyline> per series inside a .casca-line, stretched edge-to-edge with preserveAspectRatio="none" and a non-scaling stroke. Each line's color comes from --color; multiple <polyline>s auto-cycle the palette. Line-only by default (markers distort under the stretch). For an interactive no-JS series toggle, see series-toggle.html.

Single series

Website Traffic

Visitors per month

Website traffic — visitors per month
Month	Visitors
Jan	2,000
Feb	3,500
Mar	2,800
Apr	4,200
May	3,900
Jun	5,000

Multi-series

Product Comparison

Sales over 6 months

Product sales comparison over six months
Month	Product A	Product B	Product C
Jan	3,000	2,500	2,000
Feb	3,200	2,700	2,300
Mar	2,900	3,000	2,500
Apr	3,500	3,200	2,800
May	3,800	3,100	3,200
Jun	4,000	3,400	3,500

Product A

Product B

Product C

Markup

<div class="casca">
  <div class="casca-title">Website Traffic</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">
      <!-- one <polyline> per series; extra series auto-cycle the palette -->
      <polyline points="0,80 20,65 40,72 60,58 80,61 100,50"
                style="--color: var(--casca-color-1)" />
    </svg>
    <div class="casca-line-labels">
      <span class="casca-line-label">Jan</span> <!-- ... -->
    </div>
  </div>
</div>