diff --git a/packages/apollo-wind/.storybook/preview.tsx b/packages/apollo-wind/.storybook/preview.tsx
index 26aa1c574..150186555 100644
--- a/packages/apollo-wind/.storybook/preview.tsx
+++ b/packages/apollo-wind/.storybook/preview.tsx
@@ -81,6 +81,7 @@ const preview: Preview = {
             'Layout',
             'Navigation',
             'Overlays',
+            'Charts',
             [
               'UiPath',
               [
diff --git a/packages/apollo-wind/src/components/ui/chart-area.stories.tsx b/packages/apollo-wind/src/components/ui/chart-area.stories.tsx
new file mode 100644
index 000000000..27d925275
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-area.stories.tsx
@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Area Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Stacked
+// ============================================================================
+
+const stackedData = [
+  { month: 'Jan', desktop: 186, mobile: 80 },
+  { month: 'Feb', desktop: 305, mobile: 200 },
+  { month: 'Mar', desktop: 237, mobile: 120 },
+  { month: 'Apr', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'Jun', desktop: 214, mobile: 140 },
+];
+
+const stackedConfig = {
+  desktop: { label: 'Desktop', theme: chartTheme[1] },
+  mobile: { label: 'Mobile', theme: chartTheme[2] },
+} satisfies ChartConfig;
+
+export const Stacked: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Stacked area chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Total visitors by device — January to June 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={stackedConfig}>
+          <AreaChart data={stackedData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <defs>
+              <linearGradient id="stackedFillDesktop" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-desktop)" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="var(--color-desktop)" stopOpacity={0.1} />
+              </linearGradient>
+              <linearGradient id="stackedFillMobile" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-mobile)" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="var(--color-mobile)" stopOpacity={0.1} />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="mobile"
+              type="natural"
+              fill="url(#stackedFillMobile)"
+              fillOpacity={0.4}
+              stroke="var(--color-mobile)"
+              stackId="a"
+            />
+            <Area
+              dataKey="desktop"
+              type="natural"
+              fill="url(#stackedFillDesktop)"
+              fillOpacity={0.4}
+              stroke="var(--color-desktop)"
+              stackId="a"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Step
+// ============================================================================
+
+const stepData = [
+  { month: 'Jan', pageViews: 1200, sessions: 820 },
+  { month: 'Feb', pageViews: 1450, sessions: 960 },
+  { month: 'Mar', pageViews: 1100, sessions: 740 },
+  { month: 'Apr', pageViews: 1680, sessions: 1100 },
+  { month: 'May', pageViews: 1520, sessions: 980 },
+  { month: 'Jun', pageViews: 1790, sessions: 1250 },
+];
+
+const stepConfig = {
+  pageViews: { label: 'Page views', theme: chartTheme[1] },
+  sessions: { label: 'Sessions', theme: chartTheme[4] },
+} satisfies ChartConfig;
+
+export const Step: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Step area chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Page views and sessions with step interpolation
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={stepConfig}>
+          <AreaChart data={stepData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <defs>
+              <linearGradient id="stepFillPageViews" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-pageViews)" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="var(--color-pageViews)" stopOpacity={0.1} />
+              </linearGradient>
+              <linearGradient id="stepFillSessions" x1="0" y1="0" x2="0" y2="1">
+                <stop offset="5%" stopColor="var(--color-sessions)" stopOpacity={0.8} />
+                <stop offset="95%" stopColor="var(--color-sessions)" stopOpacity={0.1} />
+              </linearGradient>
+            </defs>
+            <Area
+              dataKey="sessions"
+              type="step"
+              fill="url(#stepFillSessions)"
+              fillOpacity={0.4}
+              stroke="var(--color-sessions)"
+            />
+            <Area
+              dataKey="pageViews"
+              type="step"
+              fill="url(#stepFillPageViews)"
+              fillOpacity={0.4}
+              stroke="var(--color-pageViews)"
+            />
+          </AreaChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-bar.stories.tsx b/packages/apollo-wind/src/components/ui/chart-bar.stories.tsx
new file mode 100644
index 000000000..82984a8d3
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-bar.stories.tsx
@@ -0,0 +1,212 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Bar Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Vertical
+// ============================================================================
+
+const verticalData = [
+  { month: 'Jan', desktop: 186, mobile: 80 },
+  { month: 'Feb', desktop: 305, mobile: 200 },
+  { month: 'Mar', desktop: 237, mobile: 120 },
+  { month: 'Apr', desktop: 73, mobile: 190 },
+  { month: 'May', desktop: 209, mobile: 130 },
+  { month: 'Jun', desktop: 214, mobile: 140 },
+];
+
+const verticalConfig = {
+  desktop: { label: 'Desktop', theme: chartTheme[1] },
+  mobile: { label: 'Mobile', theme: chartTheme[2] },
+} satisfies ChartConfig;
+
+export const Vertical: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Bar chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Visitors by device — January to June 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={verticalConfig}>
+          <BarChart data={verticalData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
+            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Horizontal
+// ============================================================================
+
+const horizontalData = [
+  { category: 'React', value: 42 },
+  { category: 'Vue', value: 28 },
+  { category: 'Angular', value: 19 },
+  { category: 'Svelte', value: 15 },
+  { category: 'Solid', value: 8 },
+];
+
+const horizontalConfig = {
+  value: { label: 'Popularity %', theme: chartTheme[2] },
+} satisfies ChartConfig;
+
+export const Horizontal: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Horizontal bar chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Framework popularity — developer survey 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={horizontalConfig} className="aspect-auto h-[250px] w-full">
+          <BarChart data={horizontalData} layout="vertical" margin={{ left: 24, right: 24 }}>
+            <CartesianGrid horizontal={false} />
+            <YAxis
+              dataKey="category"
+              type="category"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              width={60}
+            />
+            <XAxis type="number" tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <Bar dataKey="value" fill="var(--color-value)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Interactive
+// ============================================================================
+
+const interactiveData = [
+  { date: '2026-01-01', desktop: 222, mobile: 150 },
+  { date: '2026-01-02', desktop: 97, mobile: 180 },
+  { date: '2026-01-03', desktop: 167, mobile: 120 },
+  { date: '2026-01-04', desktop: 242, mobile: 260 },
+  { date: '2026-01-05', desktop: 373, mobile: 290 },
+  { date: '2026-01-06', desktop: 301, mobile: 340 },
+  { date: '2026-01-07', desktop: 245, mobile: 180 },
+  { date: '2026-01-08', desktop: 409, mobile: 320 },
+  { date: '2026-01-09', desktop: 59, mobile: 110 },
+  { date: '2026-01-10', desktop: 261, mobile: 190 },
+  { date: '2026-01-11', desktop: 327, mobile: 350 },
+  { date: '2026-01-12', desktop: 292, mobile: 210 },
+];
+
+const interactiveConfig = {
+  desktop: { label: 'Desktop', theme: chartTheme[1] },
+  mobile: { label: 'Mobile', theme: chartTheme[2] },
+} satisfies ChartConfig;
+
+function InteractiveBarChart() {
+  const [activeKey, setActiveKey] = React.useState<'desktop' | 'mobile'>('desktop');
+  const total = React.useMemo(
+    () => ({
+      desktop: interactiveData.reduce((acc, d) => acc + d.desktop, 0),
+      mobile: interactiveData.reduce((acc, d) => acc + d.mobile, 0),
+    }),
+    []
+  );
+
+  return (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader className="flex flex-col items-stretch space-y-0 border-b border-border-subtle p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6">
+          <CardTitle className="text-foreground">Interactive bar chart</CardTitle>
+          <CardDescription className="text-foreground-muted">
+            Daily visitors — click a toggle to filter
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {(['desktop', 'mobile'] as const).map((key) => (
+            <button
+              type="button"
+              key={key}
+              data-active={activeKey === key}
+              className="relative z-30 flex flex-1 flex-col justify-center gap-1 border-t border-border-subtle px-6 py-4 text-left even:border-l data-[active=true]:bg-surface-overlay sm:border-l sm:border-t-0 sm:px-8 sm:py-6"
+              onClick={() => setActiveKey(key)}
+            >
+              <span className="text-xs text-foreground-muted">{interactiveConfig[key].label}</span>
+              <span className="text-lg font-bold leading-none text-foreground sm:text-3xl">
+                {total[key].toLocaleString()}
+              </span>
+            </button>
+          ))}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={interactiveConfig} className="aspect-auto h-[250px] w-full">
+          <BarChart data={interactiveData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(v: string) => {
+                const d = new Date(v);
+                return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(v: string) =>
+                    new Date(v).toLocaleDateString('en-US', {
+                      month: 'short',
+                      day: 'numeric',
+                      year: 'numeric',
+                    })
+                  }
+                />
+              }
+            />
+            <Bar dataKey={activeKey} fill={`var(--color-${activeKey})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const Interactive: Story = {
+  render: () => <InteractiveBarChart />,
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-line.stories.tsx b/packages/apollo-wind/src/components/ui/chart-line.stories.tsx
new file mode 100644
index 000000000..f560e7f7d
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-line.stories.tsx
@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { CartesianGrid, Line, LineChart, XAxis, YAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Line Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Multi-line
+// ============================================================================
+
+const multiData = [
+  { month: 'Jan', desktop: 186, mobile: 80, tablet: 45 },
+  { month: 'Feb', desktop: 305, mobile: 200, tablet: 98 },
+  { month: 'Mar', desktop: 237, mobile: 120, tablet: 65 },
+  { month: 'Apr', desktop: 73, mobile: 190, tablet: 140 },
+  { month: 'May', desktop: 209, mobile: 130, tablet: 87 },
+  { month: 'Jun', desktop: 214, mobile: 140, tablet: 112 },
+];
+
+const multiConfig = {
+  desktop: { label: 'Desktop', theme: chartTheme[1] },
+  mobile: { label: 'Mobile', theme: chartTheme[2] },
+  tablet: { label: 'Tablet', theme: chartTheme[3] },
+} satisfies ChartConfig;
+
+export const MultiLine: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Multi-line chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Visitors across three device types — January to June 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={multiConfig}>
+          <LineChart data={multiData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Line
+              dataKey="desktop"
+              type="monotone"
+              stroke="var(--color-desktop)"
+              strokeWidth={2}
+              dot={{ fill: 'var(--color-desktop)', r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+            <Line
+              dataKey="mobile"
+              type="monotone"
+              stroke="var(--color-mobile)"
+              strokeWidth={2}
+              dot={{ fill: 'var(--color-mobile)', r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+            <Line
+              dataKey="tablet"
+              type="monotone"
+              stroke="var(--color-tablet)"
+              strokeWidth={2}
+              dot={{ fill: 'var(--color-tablet)', r: 4 }}
+              activeDot={{ r: 6 }}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Curved
+// ============================================================================
+
+const curvedData = [
+  { month: 'Jan', revenue: 2400, profit: 1200 },
+  { month: 'Feb', revenue: 1398, profit: 900 },
+  { month: 'Mar', revenue: 3800, profit: 2100 },
+  { month: 'Apr', revenue: 3908, profit: 2400 },
+  { month: 'May', revenue: 4800, profit: 2800 },
+  { month: 'Jun', revenue: 3490, profit: 1900 },
+];
+
+const curvedConfig = {
+  revenue: { label: 'Revenue', theme: chartTheme[4] },
+  profit: { label: 'Profit', theme: chartTheme[3] },
+} satisfies ChartConfig;
+
+export const Curved: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Curved line chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Revenue vs profit with natural curve interpolation
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={curvedConfig}>
+          <LineChart data={curvedData} margin={{ left: 12, right: 12 }}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <YAxis tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <ChartLegend content={<ChartLegendContent />} />
+            <Line
+              dataKey="revenue"
+              type="natural"
+              stroke="var(--color-revenue)"
+              strokeWidth={2}
+              dot={false}
+            />
+            <Line
+              dataKey="profit"
+              type="natural"
+              stroke="var(--color-profit)"
+              strokeWidth={2}
+              dot={false}
+            />
+          </LineChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-palette.ts b/packages/apollo-wind/src/components/ui/chart-palette.ts
new file mode 100644
index 000000000..47cf4a34e
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-palette.ts
@@ -0,0 +1,44 @@
+// Shared color palette for chart stories.
+//
+// Core theme hex values come from apollo-core theme-variables.css:
+//   slot 1 → --color-chart-light-blue
+//   slot 2 → --color-chart-blue-secondary
+//   slot 3 → --color-chart-green
+//   slot 4 → --color-chart-yellow
+//   slot 5 → --color-chart-pink
+//
+// Future theme values reference --chart-1 through --chart-5 CSS custom
+// properties defined in tailwind.consumer.css for future-light / future-dark.
+
+export const chartTheme = {
+  1: {
+    light: 'var(--color-chart-light-blue, #38c6f4)',
+    dark: 'var(--color-chart-light-blue, #44cffc)',
+    'future-light': 'var(--chart-1)',
+    'future-dark': 'var(--chart-1)',
+  },
+  2: {
+    light: 'var(--color-chart-blue-secondary, #42a1ff)',
+    dark: 'var(--color-chart-blue-secondary, #42a1ff)',
+    'future-light': 'var(--chart-2)',
+    'future-dark': 'var(--chart-2)',
+  },
+  3: {
+    light: 'var(--color-chart-green, #6eb84a)',
+    dark: 'var(--color-chart-green, #74c94b)',
+    'future-light': 'var(--chart-3)',
+    'future-dark': 'var(--chart-3)',
+  },
+  4: {
+    light: 'var(--color-chart-yellow, #ffb40e)',
+    dark: 'var(--color-chart-yellow, #ffbb27)',
+    'future-light': 'var(--chart-4)',
+    'future-dark': 'var(--chart-4)',
+  },
+  5: {
+    light: 'var(--color-chart-pink, #ed145b)',
+    dark: 'var(--color-chart-pink, #f25a8c)',
+    'future-light': 'var(--chart-5)',
+    'future-dark': 'var(--chart-5)',
+  },
+} as const;
diff --git a/packages/apollo-wind/src/components/ui/chart-pie.stories.tsx b/packages/apollo-wind/src/components/ui/chart-pie.stories.tsx
new file mode 100644
index 000000000..22fdfe237
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-pie.stories.tsx
@@ -0,0 +1,157 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Label, Pie, PieChart } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Pie Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Donut
+// ============================================================================
+
+const donutData = [
+  { browser: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+  { browser: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { browser: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+  { browser: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { browser: 'other', visitors: 190, fill: 'var(--color-other)' },
+];
+
+const donutConfig = {
+  visitors: { label: 'Visitors' },
+  chrome: { label: 'Chrome', theme: chartTheme[1] },
+  safari: { label: 'Safari', theme: chartTheme[2] },
+  firefox: { label: 'Firefox', theme: chartTheme[3] },
+  edge: { label: 'Edge', theme: chartTheme[4] },
+  other: { label: 'Other', theme: chartTheme[5] },
+} satisfies ChartConfig;
+
+function DonutChart() {
+  const totalVisitors = React.useMemo(() => donutData.reduce((acc, d) => acc + d.visitors, 0), []);
+
+  return (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Donut chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Browser market share — January to June 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={donutConfig} className="mx-auto aspect-square max-h-[300px]">
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={donutData}
+              dataKey="visitors"
+              nameKey="browser"
+              innerRadius={60}
+              strokeWidth={5}
+            >
+              <Label
+                content={({ viewBox }) => {
+                  if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                    return (
+                      <text
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                      >
+                        <tspan
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          className="fill-foreground text-3xl font-bold"
+                        >
+                          {totalVisitors.toLocaleString()}
+                        </tspan>
+                        <tspan
+                          x={viewBox.cx}
+                          y={(viewBox.cy || 0) + 24}
+                          className="fill-muted-foreground"
+                        >
+                          Visitors
+                        </tspan>
+                      </text>
+                    );
+                  }
+                  return null;
+                }}
+              />
+            </Pie>
+            <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}
+
+export const Donut: Story = {
+  render: () => <DonutChart />,
+};
+
+// ============================================================================
+// Simple
+// ============================================================================
+
+const simpleData = [
+  { segment: 'direct', value: 420, fill: 'var(--color-direct)' },
+  { segment: 'organic', value: 315, fill: 'var(--color-organic)' },
+  { segment: 'referral', value: 180, fill: 'var(--color-referral)' },
+  { segment: 'social', value: 135, fill: 'var(--color-social)' },
+];
+
+const simpleConfig = {
+  value: { label: 'Traffic' },
+  direct: { label: 'Direct', theme: chartTheme[1] },
+  organic: { label: 'Organic', theme: chartTheme[3] },
+  referral: { label: 'Referral', theme: chartTheme[4] },
+  social: { label: 'Social', theme: chartTheme[5] },
+} satisfies ChartConfig;
+
+export const Simple: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Pie chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Traffic sources — January to June 2026
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={simpleConfig} className="mx-auto aspect-square max-h-[300px]">
+          <PieChart>
+            <ChartTooltip content={<ChartTooltipContent hideLabel />} />
+            <Pie
+              data={simpleData}
+              dataKey="value"
+              nameKey="segment"
+              strokeWidth={2}
+              label={({ segment, percent }) =>
+                `${simpleConfig[segment as keyof typeof simpleConfig]?.label ?? segment} ${(percent * 100).toFixed(0)}%`
+              }
+            />
+            <ChartLegend content={<ChartLegendContent nameKey="segment" />} />
+          </PieChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-radar.stories.tsx b/packages/apollo-wind/src/components/ui/chart-radar.stories.tsx
new file mode 100644
index 000000000..ea2114678
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-radar.stories.tsx
@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Radar Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Multi-series
+// ============================================================================
+
+const multiData = [
+  { metric: 'Speed', desktop: 86, mobile: 65 },
+  { metric: 'Reliability', desktop: 92, mobile: 78 },
+  { metric: 'Scalability', desktop: 78, mobile: 60 },
+  { metric: 'Security', desktop: 95, mobile: 88 },
+  { metric: 'Usability', desktop: 72, mobile: 90 },
+  { metric: 'Support', desktop: 81, mobile: 75 },
+];
+
+const multiConfig = {
+  desktop: { label: 'Desktop', theme: chartTheme[1] },
+  mobile: { label: 'Mobile', theme: chartTheme[2] },
+} satisfies ChartConfig;
+
+export const MultiSeries: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Radar chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Platform performance across 6 dimensions
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={multiConfig} className="mx-auto aspect-square max-h-[300px]">
+          <RadarChart data={multiData}>
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="metric" />
+            <PolarGrid />
+            <Radar
+              dataKey="desktop"
+              fill="var(--color-desktop)"
+              fillOpacity={0.6}
+              stroke="var(--color-desktop)"
+            />
+            <Radar
+              dataKey="mobile"
+              fill="var(--color-mobile)"
+              fillOpacity={0.6}
+              stroke="var(--color-mobile)"
+            />
+            <ChartLegend content={<ChartLegendContent />} />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Dots
+// ============================================================================
+
+const dotsData = [
+  { skill: 'HTML', level: 95 },
+  { skill: 'CSS', level: 88 },
+  { skill: 'JS', level: 92 },
+  { skill: 'React', level: 85 },
+  { skill: 'Node', level: 70 },
+  { skill: 'SQL', level: 65 },
+];
+
+const dotsConfig = {
+  level: { label: 'Proficiency', theme: chartTheme[3] },
+} satisfies ChartConfig;
+
+export const Dots: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Radar chart — dots</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Developer skill proficiency with dot markers
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={dotsConfig} className="mx-auto aspect-square max-h-[300px]">
+          <RadarChart data={dotsData}>
+            <ChartTooltip content={<ChartTooltipContent />} />
+            <PolarAngleAxis dataKey="skill" />
+            <PolarGrid />
+            <Radar
+              dataKey="level"
+              fill="var(--color-level)"
+              fillOpacity={0.3}
+              stroke="var(--color-level)"
+              strokeWidth={2}
+              dot={{ r: 4, fill: 'var(--color-level)', fillOpacity: 1 }}
+            />
+          </RadarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-radial.stories.tsx b/packages/apollo-wind/src/components/ui/chart-radial.stories.tsx
new file mode 100644
index 000000000..ac7488902
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-radial.stories.tsx
@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Cell, Label, RadialBar, RadialBarChart } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Radial Chart',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ============================================================================
+// Bar
+// ============================================================================
+
+const barData = [
+  { name: 'safari', visitors: 200, fill: 'var(--color-safari)' },
+  { name: 'firefox', visitors: 287, fill: 'var(--color-firefox)' },
+  { name: 'edge', visitors: 173, fill: 'var(--color-edge)' },
+  { name: 'chrome', visitors: 275, fill: 'var(--color-chrome)' },
+];
+
+const barConfig = {
+  visitors: { label: 'Visitors' },
+  chrome: { label: 'Chrome', theme: chartTheme[1] },
+  safari: { label: 'Safari', theme: chartTheme[2] },
+  firefox: { label: 'Firefox', theme: chartTheme[3] },
+  edge: { label: 'Edge', theme: chartTheme[4] },
+} satisfies ChartConfig;
+
+export const Bar: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Radial bar chart</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Browser visitors as stacked radial segments
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={barConfig} className="mx-auto aspect-square max-h-[300px]">
+          <RadialBarChart
+            data={barData}
+            startAngle={-90}
+            endAngle={380}
+            innerRadius={30}
+            outerRadius={110}
+          >
+            <ChartTooltip content={<ChartTooltipContent hideLabel nameKey="name" />} />
+            <RadialBar dataKey="visitors" background>
+              {barData.map((entry) => (
+                <Cell key={`cell-${entry.name}`} fill={entry.fill} />
+              ))}
+            </RadialBar>
+            <ChartLegend
+              content={<ChartLegendContent nameKey="name" />}
+              className="-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center"
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Gauge
+// ============================================================================
+
+const GAUGE_VALUE = 72;
+const gaugeData = [{ name: 'progress', value: GAUGE_VALUE, fill: 'var(--color-progress)' }];
+
+const gaugeConfig = {
+  progress: { label: 'Completion', theme: chartTheme[1] },
+} satisfies ChartConfig;
+
+export const Gauge: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-sm">
+      <CardHeader>
+        <CardTitle className="text-foreground">Radial gauge</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Sprint completion progress — {GAUGE_VALUE}%
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={gaugeConfig} className="mx-auto aspect-square max-h-[300px]">
+          <RadialBarChart
+            data={gaugeData}
+            startAngle={180}
+            endAngle={180 - 360 * (GAUGE_VALUE / 100)}
+            innerRadius={80}
+            outerRadius={110}
+          >
+            <RadialBar dataKey="value" background cornerRadius={10}>
+              <Cell fill="var(--color-progress)" />
+            </RadialBar>
+            <Label
+              content={({ viewBox }) => {
+                if (viewBox && 'cx' in viewBox && 'cy' in viewBox) {
+                  return (
+                    <text
+                      x={viewBox.cx}
+                      y={viewBox.cy}
+                      textAnchor="middle"
+                      dominantBaseline="middle"
+                    >
+                      <tspan
+                        x={viewBox.cx}
+                        y={viewBox.cy}
+                        className="fill-foreground text-4xl font-bold"
+                      >
+                        {GAUGE_VALUE}%
+                      </tspan>
+                      <tspan
+                        x={viewBox.cx}
+                        y={(viewBox.cy || 0) + 28}
+                        className="fill-muted-foreground text-sm"
+                      >
+                        Completed
+                      </tspan>
+                    </text>
+                  );
+                }
+                return null;
+              }}
+            />
+          </RadialBarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart-tooltip.stories.tsx b/packages/apollo-wind/src/components/ui/chart-tooltip.stories.tsx
new file mode 100644
index 000000000..3a4a9ad0c
--- /dev/null
+++ b/packages/apollo-wind/src/components/ui/chart-tooltip.stories.tsx
@@ -0,0 +1,128 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import * as React from 'react';
+import { Bar, BarChart, CartesianGrid, XAxis } from 'recharts';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from '@/components/ui/chart';
+import { chartTheme } from './chart-palette';
+
+const meta = {
+  title: 'Components/Charts/Tooltips',
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const data = [
+  { month: 'Jan', revenue: 4500, expenses: 2800 },
+  { month: 'Feb', revenue: 5200, expenses: 3100 },
+  { month: 'Mar', revenue: 4800, expenses: 2900 },
+  { month: 'Apr', revenue: 6100, expenses: 3400 },
+  { month: 'May', revenue: 5800, expenses: 3200 },
+  { month: 'Jun', revenue: 7200, expenses: 3800 },
+];
+
+// ============================================================================
+// Dot indicator
+// ============================================================================
+
+const dotConfig = {
+  revenue: { label: 'Revenue', theme: chartTheme[3] },
+  expenses: { label: 'Expenses', theme: chartTheme[5] },
+} satisfies ChartConfig;
+
+export const DotIndicator: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Dot indicator</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Default dot-style tooltip indicator
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={dotConfig}>
+          <BarChart data={data}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dot" />} />
+            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Line indicator
+// ============================================================================
+
+const lineConfig = {
+  revenue: { label: 'Revenue', theme: chartTheme[1] },
+  expenses: { label: 'Expenses', theme: chartTheme[4] },
+} satisfies ChartConfig;
+
+export const LineIndicator: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Line indicator</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Vertical line-style tooltip indicator
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={lineConfig}>
+          <BarChart data={data}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
+            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
+
+// ============================================================================
+// Dashed indicator
+// ============================================================================
+
+const dashedConfig = {
+  revenue: { label: 'Revenue', theme: chartTheme[2] },
+  expenses: { label: 'Expenses', theme: chartTheme[5] },
+} satisfies ChartConfig;
+
+export const DashedIndicator: Story = {
+  render: () => (
+    <Card className="border-border-subtle bg-surface max-w-xl">
+      <CardHeader>
+        <CardTitle className="text-foreground">Dashed indicator</CardTitle>
+        <CardDescription className="text-foreground-muted">
+          Dashed border-style tooltip indicator
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer config={dashedConfig}>
+          <BarChart data={data}>
+            <CartesianGrid vertical={false} />
+            <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} />
+            <ChartTooltip content={<ChartTooltipContent indicator="dashed" />} />
+            <Bar dataKey="revenue" fill="var(--color-revenue)" radius={4} />
+            <Bar dataKey="expenses" fill="var(--color-expenses)" radius={4} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  ),
+};
diff --git a/packages/apollo-wind/src/components/ui/chart.tsx b/packages/apollo-wind/src/components/ui/chart.tsx
index 06c229171..bf95dc542 100644
--- a/packages/apollo-wind/src/components/ui/chart.tsx
+++ b/packages/apollo-wind/src/components/ui/chart.tsx
@@ -4,10 +4,13 @@ import * as RechartsPrimitive from 'recharts';
 import { cn } from '@/lib';
 
 // Format: { THEME_NAME: CSS_SELECTOR }
-// Matches ALL light themes and ALL dark themes using :is() selector
+// Core and Future themes are split so each can use their own color tokens.
+// wireframe/vertex/canvas are dark-adjacent and inherit core dark colors.
 const THEMES = {
-  light: ':is(.light, .light-hc, .future-light)',
-  dark: ':is(.dark, .dark-hc, .future-dark, .wireframe, .vertex, .canvas)',
+  light: ':is(.light, .light-hc)',
+  dark: ':is(.dark, .dark-hc, .wireframe, .vertex, .canvas)',
+  'future-light': '.future-light',
+  'future-dark': '.future-dark',
 } as const;
 
 export type ChartConfig = {
diff --git a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
index 1a5aedef5..b252c1c96 100644
--- a/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
+++ b/packages/apollo-wind/src/components/ui/component-gallery.stories.tsx
@@ -1,5 +1,21 @@
 import type { Meta } from '@storybook/react-vite';
 import { useState, useMemo } from 'react';
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  Line,
+  LineChart,
+  Pie,
+  PieChart,
+  PolarAngleAxis,
+  PolarGrid,
+  Radar,
+  RadarChart,
+  RadialBar,
+  RadialBarChart,
+} from 'recharts';
 import { Card, CardDescription, CardHeader, CardTitle } from './card';
 import { Badge } from './badge';
 import { Button } from './button';
@@ -16,6 +32,7 @@ import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from './
 import { Tabs, TabsList, TabsTrigger } from './tabs';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from './table';
 import { Calendar } from './calendar';
+import { type ChartConfig, ChartContainer } from './chart';
 import { Search } from 'lucide-react';
 
 const meta = {
@@ -34,6 +51,7 @@ enum Category {
   Navigation = 'Navigation',
   Overlays = 'Overlays',
   Feedback = 'Feedback',
+  Charts = 'Charts',
 }
 
 const CATEGORY_ORDER: Category[] = [
@@ -43,8 +61,63 @@ const CATEGORY_ORDER: Category[] = [
   Category.Navigation,
   Category.Overlays,
   Category.Feedback,
+  Category.Charts,
 ];
 
+// ============================================================================
+// Mini chart data + configs (for gallery previews)
+// ============================================================================
+
+const miniSparkData = [
+  { x: 'A', a: 30, b: 20 },
+  { x: 'B', a: 55, b: 35 },
+  { x: 'C', a: 40, b: 50 },
+  { x: 'D', a: 70, b: 30 },
+  { x: 'E', a: 50, b: 60 },
+];
+
+const miniPieData = [
+  { name: 'a', value: 40, fill: '#22d3ee' },
+  { name: 'b', value: 30, fill: '#818cf8' },
+  { name: 'c', value: 20, fill: '#34d399' },
+  { name: 'd', value: 10, fill: '#fbbf24' },
+];
+
+const miniRadarData = [
+  { m: 'A', v: 80 },
+  { m: 'B', v: 65 },
+  { m: 'C', v: 90 },
+  { m: 'D', v: 75 },
+  { m: 'E', v: 85 },
+];
+
+const miniRadialData = [
+  { name: 'a', value: 80, fill: '#22d3ee' },
+  { name: 'b', value: 60, fill: '#818cf8' },
+  { name: 'c', value: 40, fill: '#34d399' },
+];
+
+const miniDualConfig = {
+  a: { color: '#22d3ee' },
+  b: { color: '#818cf8' },
+} satisfies ChartConfig;
+
+const miniSingleConfig = {
+  a: { color: '#22d3ee' },
+} satisfies ChartConfig;
+
+const miniPieConfig = {
+  value: { color: '#22d3ee' },
+} satisfies ChartConfig;
+
+const miniRadarConfig = {
+  v: { color: '#22d3ee' },
+} satisfies ChartConfig;
+
+const miniRadialConfig = {
+  value: { color: '#22d3ee' },
+} satisfies ChartConfig;
+
 interface ComponentInfo {
   name: string;
   description: string;
@@ -657,6 +730,133 @@ const components: ComponentInfo[] = [
       </Button>
     ),
   },
+  // ============================================================================
+  // Charts
+  // ============================================================================
+  {
+    name: 'Area Chart',
+    description: 'Stacked and step area charts',
+    storyPath: 'components-charts-area-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniDualConfig} className="aspect-auto h-14 w-full">
+        <AreaChart data={miniSparkData} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <Area
+            dataKey="b"
+            type="natural"
+            fill="#818cf8"
+            fillOpacity={0.25}
+            stroke="#818cf8"
+            strokeWidth={1.5}
+          />
+          <Area
+            dataKey="a"
+            type="natural"
+            fill="#22d3ee"
+            fillOpacity={0.3}
+            stroke="#22d3ee"
+            strokeWidth={1.5}
+          />
+        </AreaChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Bar Chart',
+    description: 'Vertical, horizontal, and interactive bars',
+    storyPath: 'components-charts-bar-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniDualConfig} className="aspect-auto h-14 w-full">
+        <BarChart data={miniSparkData} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <Bar dataKey="a" fill="#22d3ee" radius={2} />
+          <Bar dataKey="b" fill="#818cf8" radius={2} />
+        </BarChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Line Chart',
+    description: 'Multi-line and curved line charts',
+    storyPath: 'components-charts-line-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniDualConfig} className="aspect-auto h-14 w-full">
+        <LineChart data={miniSparkData} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <Line dataKey="a" type="natural" stroke="#22d3ee" strokeWidth={2} dot={false} />
+          <Line dataKey="b" type="natural" stroke="#818cf8" strokeWidth={2} dot={false} />
+        </LineChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Pie Chart',
+    description: 'Donut and simple pie charts',
+    storyPath: 'components-charts-pie-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniPieConfig} className="aspect-square h-16 mx-auto">
+        <PieChart>
+          <Pie
+            data={miniPieData}
+            dataKey="value"
+            nameKey="name"
+            innerRadius={18}
+            outerRadius={30}
+            strokeWidth={0}
+          />
+        </PieChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Radar Chart',
+    description: 'Multi-series and dot radar charts',
+    storyPath: 'components-charts-radar-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniRadarConfig} className="aspect-square h-16 mx-auto">
+        <RadarChart data={miniRadarData} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <PolarGrid />
+          <PolarAngleAxis dataKey="m" tick={false} />
+          <Radar dataKey="v" fill="#22d3ee" fillOpacity={0.4} stroke="#22d3ee" strokeWidth={1.5} />
+        </RadarChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Radial Chart',
+    description: 'Radial bar and gauge charts',
+    storyPath: 'components-charts-radial-chart--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniRadialConfig} className="aspect-square h-16 mx-auto">
+        <RadialBarChart
+          data={miniRadialData}
+          startAngle={-90}
+          endAngle={270}
+          innerRadius={8}
+          outerRadius={28}
+          margin={{ top: 4, right: 4, bottom: 4, left: 4 }}
+        >
+          <RadialBar dataKey="value" background />
+        </RadialBarChart>
+      </ChartContainer>
+    ),
+  },
+  {
+    name: 'Tooltips',
+    description: 'Dot, line, and dashed tooltip styles',
+    storyPath: 'components-charts-tooltips--docs',
+    category: Category.Charts,
+    preview: (
+      <ChartContainer config={miniSingleConfig} className="aspect-auto h-14 w-full">
+        <BarChart data={miniSparkData} margin={{ top: 4, right: 4, bottom: 4, left: 4 }}>
+          <Bar dataKey="a" fill="#22d3ee" radius={2} />
+        </BarChart>
+      </ChartContainer>
+    ),
+  },
 ];
 
 function ComponentGallery() {
@@ -682,6 +882,7 @@ function ComponentGallery() {
       [Category.Navigation]: [],
       [Category.Overlays]: [],
       [Category.Feedback]: [],
+      [Category.Charts]: [],
     };
     filteredComponents.forEach((component) => {
       grouped[component.category].push(component);
@@ -702,7 +903,7 @@ function ComponentGallery() {
               </h1>
               <p className="mt-2 text-lg text-muted-foreground max-w-2xl">
                 Explore the collection of {components.length} beautifully crafted, accessible
-                components built with React and Tailwind CSS.
+                components and charts built with React and Tailwind CSS.
               </p>
             </div>
 
diff --git a/packages/apollo-wind/src/styles/tailwind.consumer.css b/packages/apollo-wind/src/styles/tailwind.consumer.css
index e1dd1e0b4..49c07112b 100644
--- a/packages/apollo-wind/src/styles/tailwind.consumer.css
+++ b/packages/apollo-wind/src/styles/tailwind.consumer.css
@@ -494,6 +494,12 @@ body.future-dark, .future-dark {
   --chart-3: var(--color-emerald-400);
   --chart-4: var(--color-amber-400);
   --chart-5: var(--color-rose-400);
+  /* Bridge apollo-core chart token names → future chart vars */
+  --color-chart-light-blue: var(--chart-1);
+  --color-chart-blue-secondary: var(--chart-2);
+  --color-chart-green: var(--chart-3);
+  --color-chart-yellow: var(--chart-4);
+  --color-chart-pink: var(--chart-5);
 
   /* ── shadcn aliases — maps to standard names for shadcn component compat ── */
   --background: var(--surface);
@@ -661,6 +667,12 @@ body.future-light, .future-light {
   --chart-3: var(--color-emerald-600);
   --chart-4: var(--color-amber-600);
   --chart-5: var(--color-rose-600);
+  /* Bridge apollo-core chart token names → future chart vars */
+  --color-chart-light-blue: var(--chart-1);
+  --color-chart-blue-secondary: var(--chart-2);
+  --color-chart-green: var(--chart-3);
+  --color-chart-yellow: var(--chart-4);
+  --color-chart-pink: var(--chart-5);
 
   /* ── shadcn aliases ──────────────────────────────────────────────────── */
   --background: var(--surface);
diff --git a/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
index c6b5166ba..53c5ffbc5 100644
--- a/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
+++ b/packages/apollo-wind/src/templates/Maestro/visualization.stories.tsx
@@ -52,17 +52,57 @@ type Story = StoryObj<typeof meta>;
 // ============================================================================
 
 const palette = {
-  cyan: { dark: '#22d3ee', light: '#0891b2' },
-  indigo: { dark: '#818cf8', light: '#4f46e5' },
-  emerald: { dark: '#34d399', light: '#059669' },
-  amber: { dark: '#fbbf24', light: '#d97706' },
-  rose: { dark: '#fb7185', light: '#e11d48' },
-  violet: { dark: '#a78bfa', light: '#7c3aed' },
-  sky: { dark: '#38bdf8', light: '#0284c7' },
+  cyan: {
+    light: 'var(--color-chart-light-blue, #38c6f4)',
+    dark: 'var(--color-chart-light-blue, #44cffc)',
+    'future-light': 'var(--chart-1)',
+    'future-dark': 'var(--chart-1)',
+  },
+  indigo: {
+    light: 'var(--color-chart-blue-secondary, #42a1ff)',
+    dark: 'var(--color-chart-blue-secondary, #42a1ff)',
+    'future-light': 'var(--chart-2)',
+    'future-dark': 'var(--chart-2)',
+  },
+  emerald: {
+    light: 'var(--color-chart-green, #6eb84a)',
+    dark: 'var(--color-chart-green, #74c94b)',
+    'future-light': 'var(--chart-3)',
+    'future-dark': 'var(--chart-3)',
+  },
+  amber: {
+    light: 'var(--color-chart-yellow, #ffb40e)',
+    dark: 'var(--color-chart-yellow, #ffbb27)',
+    'future-light': 'var(--chart-4)',
+    'future-dark': 'var(--chart-4)',
+  },
+  rose: {
+    light: 'var(--color-chart-pink, #ed145b)',
+    dark: 'var(--color-chart-pink, #f25a8c)',
+    'future-light': 'var(--chart-5)',
+    'future-dark': 'var(--chart-5)',
+  },
+  violet: {
+    light: 'var(--color-chart-blue-secondary, #42a1ff)',
+    dark: 'var(--color-chart-blue-secondary, #42a1ff)',
+    'future-light': 'var(--chart-2)',
+    'future-dark': 'var(--chart-2)',
+  },
+  sky: {
+    light: 'var(--color-chart-light-blue, #38c6f4)',
+    dark: 'var(--color-chart-light-blue, #44cffc)',
+    'future-light': 'var(--chart-1)',
+    'future-dark': 'var(--chart-1)',
+  },
 } as const;
 
 function themed(key: keyof typeof palette) {
-  return { dark: palette[key].dark, light: palette[key].light };
+  return {
+    light: palette[key].light,
+    dark: palette[key].dark,
+    'future-light': palette[key]['future-light'],
+    'future-dark': palette[key]['future-dark'],
+  };
 }
 
 // ============================================================================