Skip to content
Primitives

Chart

Recharts wired to the okibi tokens — a responsive container with a HUD-skinned tooltip and legend, driven by a config-based color system.

● LIVE
AREA // STACKED
Channel Throughput
Uplink / downlink across six cycles
Up 12.4% this window
CYCLE 0x01 — 0x06 // TELEMETRY NOMINAL
npx shadcn@latest add https://okibi.cndr.dev/r/chart.json

Charts are not a component library — they're a thin wrapper around Recharts. You bring the chart; okibi gives it the HUD skin (sharp corners, hard offset shadows, mono telemetry labels) and a config-driven color system wired to the shared --chart-* tokens. Compose ChartContainer, ChartTooltip and ChartLegend with Recharts primitives, then copy the result into your app.

Installation

Install the theme first (it ships the --chart-1…5 palette), then add the component:

npx shadcn@latest add https://okibi.cndr.dev/r/chart.json

Your First Chart

Let's build a bar chart, then layer on a grid, an axis, a tooltip and a legend.

Add your data

Start with the data. It can be anything — an array of objects is the common shape. Here, packet counts per cycle:

const chartData = [
  { cycle: "0x01", packets: 186 },
  { cycle: "0x02", packets: 305 },
  { cycle: "0x03", packets: 237 },
  { cycle: "0x04", packets: 173 },
  { cycle: "0x05", packets: 209 },
  { cycle: "0x06", packets: 264 },
];

Add a chart config

The config holds everything that isn't data — labels, colors and (optionally) icons. Keeping it separate means you can drive content and theming without touching your data source.

import { type ChartConfig } from "@/components/ui/chart";

const chartConfig = {
  packets: {
    label: "Packets",
    color: "var(--chart-1)",
  },
} satisfies ChartConfig;

Build the chart

Wrap a Recharts chart in ChartContainer and pass the config. Each config key is exposed to the chart as a --color-<key> CSS variable, so reference your series color as var(--color-packets):

import { Bar, BarChart } from "recharts";
import { ChartContainer } from "@/components/ui/chart";

<ChartContainer config={chartConfig}>
  <BarChart data={chartData}>
    <Bar dataKey="packets" fill="var(--color-packets)" />
  </BarChart>
</ChartContainer>

Add a grid

import { CartesianGrid } from "recharts";

<CartesianGrid vertical={false} />

Add an axis

import { XAxis } from "recharts";

<XAxis dataKey="cycle" tickLine={false} axisLine={false} tickMargin={8} />

Add a tooltip

ChartTooltip is Recharts' tooltip; ChartTooltipContent is the HUD-skinned body that reads labels and colors straight from your config:

import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart";

<ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />

That's a complete chart. Here it is live — the Code tab is the full source:

● LIVE
BAR // VERTICAL
Packet Volume
Per-cycle packet counts
Peak 305 at 0x02
CYCLE 0x01 — 0x06 // 1,374 TOTAL

Add a legend

A legend earns its place once you have more than one series. Add ChartLegend with ChartLegendContent and it maps each color back to its config label:

import { ChartLegend, ChartLegendContent } from "@/components/ui/chart";

<ChartLegend content={<ChartLegendContent />} />
● LIVE
LINE // MULTIPLE
Multi-Channel Trace
Three channels overlaid
3 channels nominal
CYCLE 0x01 — 0x06 // MUX TRACE

Chart config

ChartConfig decouples appearance from data. Each key matches a dataKey (or a nameKey) in your chart and can set a label, an icon, and either a single color or per-theme colors:

import { Cpu, MemoryStick } from "lucide-react";
import { type ChartConfig } from "@/components/ui/chart";

const chartConfig = {
  compute: {
    label: "Compute",
    icon: Cpu,
    color: "var(--chart-1)",
  },
  memory: {
    label: "Memory",
    icon: MemoryStick,
    // Per-theme colors instead of a single `color`:
    theme: { light: "var(--chart-2)", dark: "var(--chart-2)" },
  },
} satisfies ChartConfig;

Define the config once — the chart, the tooltip and the legend all read from it.

Theming

Charts pull their colors from the shared tokens. okibi ships a five-step chart palette — --chart-1 through --chart-5 (scarlet → warning → success → cyan → special) — already defined for both light and dark.

CSS variables

Reference a token in your config and ChartContainer exposes it to the chart as --color-<key>:

const chartConfig = {
  uplink: { label: "Uplink", color: "var(--chart-1)" },
  downlink: { label: "Downlink", color: "var(--chart-2)" },
} satisfies ChartConfig;

Using colors

Once the config is set, reference the generated variable anywhere Recharts takes a color:

<Bar dataKey="uplink" fill="var(--color-uplink)" />
<Line dataKey="uplink" stroke="var(--color-uplink)" />

The tooltip and legend read the same config, so they stay in sync automatically. To recolor a chart, point the config at different --chart-* steps (or any token) — nothing in the chart body changes. Because every value flows from the shared tokens, the chart renders identically here and in your app after install.

Tooltip

A tooltip has a label, a per-series indicator, a name and a value. ChartTooltipContent accepts:

PropDescription
indicatorIndicator style: "dot" (default), "line" or "dashed".
hideLabelHide the top label row.
hideIndicatorHide the per-series color swatch.
nameKeyConfig key to use for each series' name.
labelKeyConfig key to use for the label.
<ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />

Legend

ChartLegend is Recharts' legend; ChartLegendContent renders the HUD swatches and labels. It accepts:

PropDescription
nameKeyConfig key to use for each item's label.
verticalAlign"bottom" (default) or "top".
hideIconHide the color swatch / config icon.
<ChartLegend content={<ChartLegendContent />} />

Accessibility

Recharts can add keyboard navigation and screen-reader support via the accessibilityLayer prop on the chart:

<BarChart accessibilityLayer data={chartData}>

The gallery demos opt out (accessibilityLayer={false}) because they're display-only HUD readouts that reveal nothing on interaction — that drops the stray focus ring and tab stop. Turn it on for charts users actually explore.

More charts

This page teaches the API. For the full catalog — every family rendered in the okibi skin, each with copy-paste source — see the Charts gallery:

  • Area — stacked, gradient and stepped
  • Bar — vertical, horizontal and stacked
  • Line — linear, multi-series and dotted
  • Pie — donut and labeled
  • Radar — multi-axis profile
  • Radial — single-metric gauge

Table

Data-readout table with mono cells and uppercase heads.

Dialog

Modal dialog framed with corner-bracket reticles and a hard offset shadow.

On this page

InstallationYour First ChartAdd your dataAdd a chart configBuild the chartAdd a gridAdd an axisAdd a tooltipAdd a legendChart configThemingCSS variablesUsing colorsTooltipLegendAccessibilityMore charts