visualization · native chart

TuxChartArea

Native SVG area chart, sibling to TuxChartLine. Use when the magnitude is the message — cumulative ingest volume, daily totals, compositional time-series. Same data shape as TuxChartLine for easy switching.

flagship · single series

Files ingested

Overlay (default) variant — area fills from 0 with 0.22 opacity, edged with a crisp top line. End-of-area value label colored to series.

010203040JanFebMarAprMayJunJulAugSepOctNovDec44
<tux-chart-area :labels="months" :series="singleSeries" />

stacked · composition over time

Corpus composition

Pass variant="stacked" for cumulative bands — the top edge of the stack is the total. Each band fills with 0.78 opacity so series identity stays legible.

0102030405060JanFebMarAprMayJunJulAug331814
  • CSV
  • PDF
  • GeoJSON
<tux-chart-area :labels="months" :series="stackedSeries" variant="stacked" legend />

composition · KPI strip + stacked area

"Total · Series A · Series B" above the stack

The canonical "summary + trend" composition absorbed from the Charts UI Kit (NOTES.md §Absorb #2). Anchor a row of TuxBigStat above the area chart so the operator reads the headline numbers first, then sees the shape.

184M

Total

33M

CSV

18M

PDF

14M

GeoJSON

0102030405060JanFebMarAprMayJunJulAug331814
<!-- "KPI strip over stacked area" — pattern absorbed from Charts UI Kit -->
<div class="kpi-strip">
  <TuxBigStat label="Total" :value="184" suffix="M" delta="+12% MoM" />
  <TuxBigStat label="CSV"  :value="33" suffix="M" />
  <TuxBigStat label="PDF"  :value="18" suffix="M" />
  <TuxBigStat label="GeoJSON" :value="14" suffix="M" />
</div>
<tux-chart-area :labels="months" :series="stackedSeries" variant="stacked" />