visualization · native chart
TuxChartBar
--chart-1..8, value labels colored to the bar in single-series mode, optional comparison overlay for projection-vs-actual, and an auto-derived screen- reader summary. Renders bare in dashboard tiles; wrap in
TuxChartFrame to inherit the editorial chrome (eyebrow / display-face title / signature rule / source line) for reports. flagship · single series
Files ingested per month
Single-series mode walks the palette across categories so each bar carries its own hue + colored value label. Use when the data point itself is the focus.
<tux-chart-bar
:labels="months"
:series="[
{ key: 'ingest', label: 'Files ingested', data: [12, 18, 24, 31, 28, 35] },
]"
/>multi-series · grouped
Scan throughput by status
Three series — palette indexes 1, 2, 3 (maroon / slate teal / wheat). Each category shows the three series side-by-side.
<tux-chart-bar :labels="months" :series="trafficByStatus" />stacked variant
Same data, stacked
Pass variant="stacked" when the *total per category* matters more than the individual values. Useful for "of all scans this month, what's the composition?"
<tux-chart-bar :labels="months" :series="trafficByStatus" variant="stacked" />comparison overlay · projections vs actuals
Forecast vs realized
Pass series[i].comparison with the same length as data. The component draws a 32%-opacity bar at each comparison value behind the primary bar — a single-glance read on "where did we hit / miss." Absorbed from the Snow Dashboard "Projections vs Actuals" pattern.
<!-- The lighter "comparison" overlay sits behind the primary bar -->
<tux-chart-bar :labels="quarters" :series="projectionsActuals" />horizontal orientation
Long category labels
Use horizontal when categories have long names or when you have more than ~10 categories — the bars stack vertically and the labels read naturally left of each bar.
<tux-chart-bar
:labels="corridors"
:series="corridorScores"
orientation="horizontal"
:width="640"
:height="360"
/>wrapped · editorial frame
Inside a TuxChartFrame
Wrap in TuxChartFrame to make the chart a numbered exhibit (eyebrow + display-face title + maroon signature rule + source citation below).
Exhibit 12.01
Scan throughput by status
Active / queued / failed counts per month
<tux-chart-frame
eyebrow="Exhibit 12.01"
title="Scan throughput by status"
source="Source: TTI Landscape index, 2026"
>
<tux-chart-bar :labels="months" :series="trafficByStatus" />
</tux-chart-frame>