vue-charts Tracker
A tracker shows a status per period as a row of bars, like the uptime history on a status page. Each row of data is one bar, oldest first; the bar's color comes from its status.
Uptime
When you append a new day and drop the oldest, the bars slide left together: the oldest leaves past the edge and the new one arrives from the right. Each bar keeps its DOM node, because bars match by name-key (the date), not by position.
Your own statuses
Any value can be a status. Give it a color with statusColors and readable text with statusLabels.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | Row[] | required | One row per bar, oldest first |
data-key | row path or accessor | 'status' | Field with the status |
name-key | row path or accessor | 'date' | Field naming the bar. It is the bar's identity across updates. YYYY-MM-DD values show as dates in tooltips |
status-colors | Record<string, string> | see below | Fill per status, merged over the defaults |
status-labels | Record<string, string> | see below | Tooltip and screen-reader text per status |
gap | number | 2 | Space between bars in px. Bars narrower than 3 px touch |
radius | number | 2 | Corner radius, capped at half the bar width |
locale | string | 'en-US' | Locale for dates in tooltips |
width / height / aspect | number | full width, 32 px tall | Size. See chart size |
title | string | 'Status history' | Accessible name of the bar list |
active-index | number | null | — | Rendered cell position, for v-model:active-index |
is-animation-active | boolean | true | Animate data changes |
transition | ChartTransition | motion tokens | Timing of data changes |
Default statuses:
| Status | Label | Color |
|---|---|---|
up | Operational | var(--v-charts-status-up, #22c55e) |
degraded | Degraded | var(--v-charts-status-degraded, #f59e0b) |
down | Down | var(--v-charts-status-down, #ef4444) |
maintenance | Maintenance | var(--v-charts-status-maintenance, #3b82f6) |
| missing or unknown | No data | var(--v-charts-muted, #e5e5e5) |
Events and slots
| Payload | Description | |
|---|---|---|
@cell-click, @cell-mouseenter, @cell-mouseleave | (row, index, event) | The row of data behind the bar. cell-click gets a MouseEvent, or a KeyboardEvent for Enter |
#cell | { cell, index, active, x, y, width, height, fill, radius } | Replace the bar's <rect> |
| default slot | — | Place <Tooltip> here |
Keyboard
The bars form one focusable list. Arrow keys move between bars, Home and End jump to the first and last, Enter emits cell-click for the active bar (with a KeyboardEvent), Escape clears the selection. The active bar drives the tooltip.
Bind v-model:active-index to control selection; null clears it. Pointer and keyboard changes request an update. See Events and v-model for control precedence.
The row type Row is inferred from data. Key props accept typed row paths or accessors.