Chart

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

ChartContainer

id
className
children
config

React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["children"]; }

ChartLegendContent

className
hideIcon = false
payload
verticalAlign = "bottom"
nameKey

React.ComponentProps<"div"> & Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & { hideIcon?: boolean; nameKey?: string; }

ChartStyle

id
config

{ id: string; config: ChartConfig; }

ChartTooltipContent

active
payload
className
indicator = "dot"
hideLabel = false
hideIndicator = false
label
labelFormatter
labelClassName
formatter
color
nameKey
labelKey

React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & { hideLabel?: boolean; hideIndicator?: boolean; indicator?: "line" | "dot" | "dashed"; nameKey?: string; labelKey?: string; }

Code

// owner: Sona
"use client";

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@/components/ui/chart";
import { Line, LineChart, XAxis, YAxis } from "recharts";

const data = [
  { day: "Mon", value: 24 },
  { day: "Tue", value: 31 },
  { day: "Wed", value: 28 },
  { day: "Thu", value: 36 },
  { day: "Fri", value: 42 },
];

const config: ChartConfig = {
  value: {
    label: "Deployments",
    color: "hsl(var(--primary))",
  },
};

export default function ChartExample() {
  return (
    <ChartContainer config={config} className="h-64 w-full">
      <LineChart data={data} margin={{ left: 12, right: 12 }}>
        <XAxis dataKey="day" axisLine={false} tickLine={false} />
        <YAxis hide domain={[0, 50]} />
        <ChartTooltip content={<ChartTooltipContent />} cursor={false} />
        <Line
          type="monotone"
          dataKey="value"
          stroke="var(--color-value)"
          strokeWidth={2}
          dot={{ r: 2 }}
          activeDot={{ r: 4 }}
        />
      </LineChart>
    </ChartContainer>
  );
}

Chart

Component preview

On this page

Command Palette