Skip to main content

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.

Interactive Telemetry Lab

Area Chart & Telemetry Volume Workbench

Presets:
0102030405060JanFebMarAprMayJunJulAug331814
  • CSV
  • PDF
  • GeoJSON
Properties Inspector5 configurable knobs
Telemetry Datasetdataset
Color Palettepalette
SVG Pattern Hatchingpatterns
false
Area Stackingvariant
Show Legendlegend
true
Dynamic Component Syntax
<tux-chart-area
  :labels="recentMonths"
  :series="stackedSeries"
  variant="stacked"
  legend
/>

accessible · cvd texture hatching

Universal CVD & Monochrome Pattern Hatching

Pass palette="cvd" and patterns to overlay tactile dual-line SVG hatchings across stacked area bands. Each layer is immediately distinguishable by texture in addition to color, satisfying WCAG 1.4.1 (Use of Color) under monochrome print and any variant of color vision deficiency.

0102030405060JanFebMarAprMayJunJulAug331814
  • CSV
  • PDF
  • GeoJSON
<!-- Okabe-Ito CVD palette with high-contrast dual-line SVG texture hatching -->
<tux-chart-area
  :labels="recentMonths"
  :series="stackedSeries"
  palette="cvd"
  patterns
  variant="stacked"
  legend
/>

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" />