visualization · native chart

TuxChartBar

Native SVG bar chart. No external library. Sibling to TuxChartLine and follows the same chart-foundations doctrine: maroon-led palette via --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.

Interactive Telemetry Lab

Bar Chart & Series Telemetry Workbench

Presets:

Active
Queued
Failed

Properties Inspector6 configurable knobs

Telemetry Datasetdataset

Bar Stackingvariant

Color Palettepalette

SVG Pattern Hatchingpatterns

false

Axis Orientationorientation

Show Legendlegend

true

Dynamic Component Syntax

<tux-chart-bar
  :labels="months"
  :series="trafficByStatus"
  legend
/>

accessible · cvd texture hatching

Universal CVD & Monochrome Pattern Hatching

Pass palette="cvd" and patterns to activate multi-channel redundancy. Each series receives an overlay of high-contrast dual-line SVG texture hatching (diagonal right, dots, crosshatch, diagonal left) paired with Okabe-Ito barrier-free hues. The legend swatches replicate both color and pattern, ensuring instant readability for users with Deuteranopia, Protanopia, Tritanopia, or when printed on black-and-white laser printers.

Active
Queued
Failed

<!-- Okabe-Ito CVD palette with high-contrast dual-line SVG texture hatching -->
<tux-chart-bar
  :labels="months"
  :series="trafficByStatus"
  palette="cvd"
  patterns
  legend
/>

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.

Active
Queued
Failed

<tux-chart-bar :labels="months" :series="trafficByStatus" legend />

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

Active
Queued
Failed

<tux-chart-bar :labels="months" :series="trafficByStatus" variant="stacked" legend />

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

Active
Queued
Failed

<tux-chart-frame
  eyebrow="Exhibit 12.01"
  title="Scan throughput by status"
  source="Source: TTI Corridor index, 2026"
>
  <tux-chart-bar :labels="months" :series="trafficByStatus" legend />
</tux-chart-frame>