visualization · native chart
TuxChartLine
--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. 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 · markers
Scan throughput by status
Three series — palette indexes 1, 2, 3 (maroon / slate teal / wheat). Markers on every point make individual data points clickable in interactive consumers. Legend stays off; the end-of-line labels carry identity.
<tux-chart-line :labels="months" :series="multiSeries" markers />previous-period overlay
Current week vs prior week
Pass series[i].previous with the same length as data. The component renders a 60% opacity dashed companion in the same hue family — the visual cue that says "same metric, prior window."
<!-- 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 />confidence band
Estimated rate with 95% CI
Pass series[i].band as an array of [low, high] tuples. Soft fill in the same hue family. Use for forecasts, estimates, and any chart where the reader needs to see uncertainty alongside the central line.
<!-- series[].band renders a soft CI fill behind the line. -->
<tux-chart-line :labels="months" :series="bandSeries" />hover tooltip · keyboard arrow nav
Pointer-driven readout
On by default. Hover, click into the plot area, or tab focus + arrow-key to cycle through data points. The tooltip shows every series' value at the active index, with a 60%-opacity "previous" readout when applicable.
<!-- Tooltip is on by default — disable with :tooltip="false" -->
<tux-chart-line :labels="months" :series="multiSeries" markers />brush selector · drill into a window
Drag the handles below
Pass brush + v-model:range to get a compact preview strip below the main chart with two draggable handles. The main chart rescales to the window. Drag the window itself (between the handles) to pan; drag handles to resize. Carry-forward from the Charts UI Kit absorption.
<!-- Two-way bound range; drag the handles below the chart -->
<tux-chart-line
v-model:range="visibleRange"
:labels="months"
:series="singleSeries"
brush
/>composition · open in focus mode
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
<tux-chart-frame
eyebrow="Exhibit 11.04"
title="Monthly ingest rate"
source="Source: TTI Landscape index, 2026"
>
<tux-chart-line :labels="months" :series="singleSeries" />
</tux-chart-frame>