Chart

Wrapper components that apply the Omni CSS tokens to Recharts surfaces— think glass axes, muted tooltips, and theme-aware data colors.

Examples

Request vs error rate

Multi-series area chart with legend and tooltip styled by the registry.

Regional latency

Single-series bar chart using the same container for consistent styling.

Installation

pnpm dlx shadcn@latest add @omni/chart

Usage

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { LineChart, Line, XAxis, Tooltip } from "recharts"

const data = [
  { label: "00:00", value: 120 },
  { label: "06:00", value: 180 },
]

<ChartContainer config={{ value: { label: "Requests", theme: { light: "#38bdf8" } } }}>
  <LineChart data={data}>
    <XAxis dataKey="label" />
    <Tooltip content={<ChartTooltipContent />} />
    <Line type="monotone" dataKey="value" stroke="var(--color-value)" />
  </LineChart>
</ChartContainer>