DocumentationNuxt Charts v3

Status Tracker Chart

Learn how to implement and customize Status Tracker Charts in your Nuxt application.

The StatusTrackerChart component renders a compact, responsive timeline of categorical status bars — the familiar uptime / status-page view. When the container cannot fit every bar, older records are dropped so the newest stay visible on the right. New in v3.

Basic Usage

<script lang="ts" setup>
interface StatusSample {
  status: string;
  label: string;
}

const statusCategories: Record<string, BulletLegendItemInterface> = {
  operational: { name: "Operational", color: "var(--color-green-500)" },
  degraded: { name: "Degraded", color: "var(--color-amber-400)" },
  outage: { name: "Outage", color: "var(--color-red-500)" },
};

// 90 days of history, oldest → newest.
const statusHistory: StatusSample[] = Array.from({ length: 90 }, (_, i) => {
  const day = i + 1;
  let status = "operational";
  if (day === 34 || day === 71) status = "outage";
  else if (day % 17 === 0) status = "degraded";
  return { status, label: `Day ${day}` };
});
</script>

<template>
  <StatusTrackerChart
    :data="statusHistory"
    :categories="statusCategories"
    title="api.example.com"
    summary="99.94% uptime"
    start-label="90 days ago"
    end-label="Today"
    :height="30"
    :bar-width="7"
    :bar-gap="3"
  />
</template>

Props

Prop	Type	Default	Description
`data`	`T[]`	Required	Status samples ordered oldest-to-newest.
`categories`	`Record<string, BulletLegendItemInterface>`	Required	Maps each status key to its display label and color.
`title`	`string`	`undefined`	Optional chart title shown in the header.
`summary`	`string \| number`	`undefined`	Optional summary shown in the header, e.g. `"99.99% uptime"`.
`height`	`number`	`28`	Fixed chart height in pixels.
`barWidth`	`number`	`8`	Width of each status bar in pixels.
`barGap`	`number`	`3`	Gap between status bars in pixels.
`visibleBars`	`number`	`undefined`	Explicit number of bars to render. Overrides responsive fitting.
`startLabel`	`string`	`undefined`	Label shown under the left edge of the tracker.
`endLabel`	`string`	`undefined`	Label shown under the right edge of the tracker.
`emptyStatus`	`string`	`'empty'`	Status key used for generated empty bars.
`emptyColor`	`string`	`var(--chart-empty-color, #e5e7eb)`	Fallback colour for generated empty bars.
`statusAccessor`	`(datum: T, index: number) => string`	`datum.status`	Resolve a status key from a datum.
`labelAccessor`	`(datum: T, index: number) => string`	`datum.label`	Resolve a tooltip/ARIA label from a datum.
`valueAccessor`	`(datum: T, index: number) => number \| undefined`	`datum.value`	Resolve a numeric value shown in tooltips.
`valueFormatter`	`(value: number, datum: T, index: number) => string`	`undefined`	Format numeric values for tooltips.
`hideHeader`	`boolean`	`false`	Hide the header region.
`hideLegend`	`boolean`	`false`	Hide the status legend.
`hideTooltip`	`boolean`	`false`	Hide native browser tooltips.
`rounded`	`boolean`	`true`	Round only the first and last visible bars.

Data Format

Provide samples oldest-to-newest. Each status must have a matching entry in categories.

types.ts

interface StatusTrackerDatum {
  status: string;
  label?: string;
  value?: number;
}

Candlestick Chart

Learn how to implement and customize Candlestick Charts in your Nuxt application.

Sankey Chart

Visualize flow relationships between nodes with the Sankey diagram component.