Skip to main content

visualization · native chart

TuxChartLine

Native SVG line chart. No external library. Follows chart-foundations: maroon-led palette via --chart-1..8, end-of-line value labels colored to the series (color-blind users get identity from text adjacency, not just hue), optional previous-period dashed overlay, optional confidence band, 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

Line Chart & Telemetry Series Workbench

Presets:
Properties Inspector7 configurable knobs
Telemetry Datasetdataset
Categorical Palettepalette
Show Point Markersmarkers
true
Distinct Geometric MarkersdistinctMarkers
true
Accessible Dash Patternspatterns
true
Interactive Range Brushbrush
false
Show Series Legendlegend
true
Dynamic Component Syntax
<tux-chart-line
  :labels="months"
  :series="multiSeries"
  markers
  legend
  :width="640"
  :height="280"
/>

flagship · single series

Annual ingest rate

Single-series line with end-of-line value label. The label carries series identity — even without a legend, the reader sees the final value at a glance. 

<tux-chart-line :labels="months" :series="series" :width="640" :height="280" />

multi-series · universal cvd redundancy

Scan operations by status (CVD & Monochrome Safe)

Three series walking the palette with multi-channel redundant encoding: each series automatically receives a unique stroke-dash pattern (solid, dashed, dotted) and distinct geometric marker glyph (circle ●, square ■, triangle ▲). The legend renders the exact line sample and marker glyph, ensuring instant legibility across all forms of colorblindness (Deutan, Protan, Tritan) and low-toner monochrome printouts. 

<tux-chart-line :labels="months" :series="multiSeries" markers legend />

colorblindness · okabe-ito universal palette

Okabe-Ito Universal Palette (Blue / Orange Polarity)

Pass palette="cvd" to activate the clinically verified Okabe-Ito 8-color universal palette (--chart-cvd-1..8). The primary series are anchored by Deep Blue (#0072B2) and Warm Orange (#E69F00), maximizing chromatic and luminance contrast across Protanopia, Deuteranopia, and Tritanopia confusion axes. Combined with shape-distinct markers and stroke dash patterns, charts achieve 100% triple-redundant accessibility. 

<!-- Okabe-Ito Universal CVD Palette: Deep Blue (#0072B2) & Warm Orange (#E69F00) Polarity -->
<tux-chart-line :labels="months" :series="multiSeries" palette="cvd" markers legend />

comparison overlay · prior period

Same metric, prior window

Pass series[i].previous with the same length as data. The component draws a 60%-opacity dashed line in the same hue behind the primary — an instant read on "ahead or behind last year" without taking a whole extra series color. 

<!-- series[].previous renders as a 60% opacity dashed
     companion in the same hue. Same metric, prior window. -->
<tux-chart-line :labels="labels" :series="previousSeries" markers />

statistical · confidence band

Estimate with uncertainty band

Pass series[i].band as an array of [low, high] tuples. Renders a soft 12%-opacity fill behind the line — right for projections, sensor error margins, or 95% CIs. 

<!-- series[].band renders a soft CI fill behind the line. -->
<tux-chart-line :labels="months" :series="bandSeries" />

interactive · crosshair tooltip

Inspect values across series

Hover or tap to drop a vertical cursor rule; the floating card shows values across all series at that x-position. Keyboard accessible: Tab into the chart, Arrow keys scrub. 

<!-- Tooltip is on by default — disable with :tooltip="false" -->
<tux-chart-line :labels="months" :series="multiSeries" markers />

interactive · timeline brush

Pan and zoom over long ranges

Pass brush to render a mini-map strip beneath the chart. Drag the handles or pan the window to zoom into a subset of the series without page-level controls. Two-way bind with v-model:range="[startIndex, endIndex]".

Visible: months[2..9] = Mar–Oct

<!-- Two-way bound range; drag the handles below the chart -->
<tux-chart-line
  v-model:range="visibleRange"
  :labels="months"
  :series="singleSeries"
  brush
/>

modal · focus view

Pin the chart full-viewport

Compose with TuxFocusView to give consumers a "pin this chart full-screen" affordance — useful in dashboard tiles when a chart needs more breathing room for analysis. The brush + tooltip still work inside the overlay. 

<UButton icon="lucide:maximize" @click="focusOpen = true">Open in focus mode</UButton>
<TuxFocusView
  v-model:open="focusOpen"
  eyebrow="Exhibit 11.04"
  title="Monthly ingest rate"
>
  <template #actions>
    <UButton variant="ghost" icon="lucide:download" />
  </template>
  <TuxChartLine :labels="months" :series="multiSeries" :width="1100" :height="500" markers brush />
</TuxFocusView>

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). This is the report rhythm; bare lines belong in dashboard tiles.

Exhibit 11.04

Monthly ingest rate

Files added to the corpus per month — total across all agents

Source: TTI Corridor index, 2026

<tux-chart-frame
  eyebrow="Exhibit 11.04"
  title="Monthly ingest rate"
  source="Source: TTI Corridor index, 2026"
>
  <tux-chart-line :labels="months" :series="singleSeries" />
</tux-chart-frame>