"use client"; import { cn } from "@/components/ui/lib/utils"; import * as React from "react"; import { Legend as RechartsLegend, Tooltip as RechartsTooltip, ResponsiveContainer, } from "recharts"; import type { LegendPayload } from "recharts/types/component/DefaultLegendContent"; import type { NameType, Payload, ValueType, } from "recharts/types/component/DefaultTooltipContent"; import type { Props as LegendProps } from "recharts/types/component/Legend"; import type { TooltipContentProps } from "recharts/types/component/Tooltip"; declare module "react" { interface CSSProperties { [key: `--${string}`]: string | number | undefined; } } const THEMES = { dark: ".dark", light: "" } as const; export type ChartConfig = { [k in string]: { label?: React.ReactNode; icon?: React.ComponentType; } & ( | { color?: string; theme?: never } | { color?: never; theme: Record } ); }; type ChartContextProps = { config: ChartConfig; }; const ChartContext = React.createContext(null); function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } interface ChartItem { dataKey?: string | number; payload?: Record | undefined; name?: string | number; value?: ValueType | string | undefined; color?: string; fill?: string; } function ChartContainer({ id, className, children, config, ...props }: React.ComponentProps<"div"> & { config: ChartConfig; children: React.ComponentProps["children"]; }) { const uniqueId = React.useId(); const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`; return (

{children}

); } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter( ([, config]) => config.theme || config.color, ); if (!colorConfig.length) { return null; } return (

Installation

Examples

Source Credits