Charts

Interactive chart components powered by Recharts with Y2K styling — thick navy outlines, pastel fills, custom tooltips, and retro window frames.

Installation

terminal.sh

npx y2kui@latest add chart

Bar Chart

A flat bar chart with thick navy outlines, pastel fills, and a custom Y2K tooltip. Great for comparing discrete values across categories.

Preview

bar-chart-demo.app

Bar Chart

Usage

import { BarChart } from "@/components/ui/chart";

const data = [
  { label: "Mon", value: 120 },
  { label: "Tue", value: 250 },
  { label: "Wed", value: 180 },
  { label: "Thu", value: 320 },
  { label: "Fri", value: 210 },
];

export function Example() {
  return <BarChart data={data} />;
}

Props

Prop	Type	Default	Description
`data`	{ label: string; value: number; color?: string }[]	—	Array of data points for the chart.
`height`	number	`280`	Chart height in pixels.
`showGrid`	boolean	`true`	Show background grid lines.
`showTooltip`	boolean	`true`	Show interactive tooltip on hover.

Line Chart

A line chart with thick navy stroke, gradient area fill, and smooth Y2K tooltips. Perfect for showing trends over time.

Preview

line-chart-demo.app

Line Chart

Usage

import { LineChart } from "@/components/ui/chart";

const data = [
  { label: "Jan", value: 80 },
  { label: "Feb", value: 195 },
  { label: "Mar", value: 130 },
  { label: "Apr", value: 280 },
  { label: "May", value: 220 },
  { label: "Jun", value: 350 },
];

export function Example() {
  return <LineChart data={data} />;
}

Props

Prop	Type	Default	Description
`data`	{ label: string; value: number }[]	—	Array of data points.
`color`	string	`var(--y2k-pink)`	Line color (CSS variable or hex).
`height`	number	`280`	Chart height in pixels.
`showArea`	boolean	`true`	Show gradient area fill under the line.
`showGrid`	boolean	`true`	Show background grid lines.
`showTooltip`	boolean	`true`	Show interactive tooltip on hover.

Donut Chart

A donut chart with thick navy outlines and pastel segments. Ideal for showing part-to-whole relationships.

Preview

donut-chart-demo.app

Donut Chart

Blue450 (44%)

Pink280 (27%)

Mint180 (17%)

Lemon120 (12%)

Usage

import { DonutChart } from "@/components/ui/chart";

const data = [
  { label: "Blue", value: 450, color: "var(--y2k-blue)" },
  { label: "Pink", value: 280, color: "var(--y2k-pink)" },
  { label: "Mint", value: 180, color: "var(--y2k-mint)" },
  { label: "Lemon", value: 120, color: "var(--y2k-lemon)" },
];

export function Example() {
  return <DonutChart data={data} />;
}

Props

Prop	Type	Default	Description
`data`	{ label: string; value: number; color?: string }[]	—	Array of segments.
`size`	number	`280`	Chart size in pixels.
`showTooltip`	boolean	`true`	Show interactive tooltip on hover.

On this page