# EvilCharts Full Documentation > Full markdown snapshot of the EvilCharts documentation generated from the same MDX source as evilcharts.com. ## Chart Config > Define labels, colors, and icons for each data series Source: https://evilcharts.com/docs/chart-config Markdown: https://evilcharts.com/docs/chart-config.md --- title: Chart Config description: Define labels, colors, and icons for each data series image: /og/chart-config.png --- Every Evil Chart component accepts a `chartConfig` object. It maps each data key to its display metadata — **labels**, **colors** (with theme support), and optional **icons** shown in tooltips and legends. ## Structure ```tsx import { type ChartConfig } from "@/registry/ui/chart"; const chartConfig = { desktop: { label: "Desktop", icon: MonitorIcon, colors: { light: ["#047857"], dark: ["#10b981"], }, }, mobile: { label: "Mobile", icon: SmartphoneIcon, colors: { light: ["#be123c"], dark: ["#f43f5e"], }, }, } satisfies ChartConfig; ``` Each key (e.g. `desktop`, `mobile`) must match a data key in your dataset. Its type: ```tsx type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; colors?: { light?: string[]; dark?: string[]; }; } >; ``` ## Properties ### label The name shown in tooltips and legends. A string or any `React.ReactNode`. ```tsx const chartConfig = { desktop: { label: "Desktop Users", // [!code highlight] // ... }, } satisfies ChartConfig; ``` ### colors Theme-aware color arrays. Provide at least one theme key (`light` or `dark`); each holds an array of CSS color strings. **Single color** — one color per theme for a solid fill: ```tsx colors: { light: ["#047857"], dark: ["#10b981"], } ``` **Multiple colors** — an array creates gradient fills across bars, areas, and other elements, evenly distributed across the series: ```tsx colors: { light: ["#a855f7", "#6366f1", "#3b82f6"], dark: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"], } ``` Themes can define different color counts — the chart distributes them using the max count across all themes. ### icon An optional React component that replaces the default color indicator in the **tooltip** and **legend** — useful for distinguishing series beyond color. ```tsx import { Monitor, Smartphone } from "lucide-react"; const chartConfig = { desktop: { label: "Desktop", icon: Monitor, // [!code highlight] [!code word:Monitor] colors: { light: ["#047857"], dark: ["#10b981"] }, }, mobile: { label: "Mobile", icon: Smartphone, // [!code highlight] [!code word:Smartphone] colors: { light: ["#be123c"], dark: ["#f43f5e"] }, }, } satisfies ChartConfig; ``` The `icon` renders in place of the color dot/square in tooltips and the color indicator in legends. It's styled with `text-muted-foreground` and sized `h-2.5 w-2.5` in tooltips, `h-3 w-3` in legends. ## How Colors Work The chart config generates CSS custom properties scoped to each chart instance. A key `desktop` with colors `["#a855f7", "#6366f1"]` produces: ```css --color-desktop-0: #a855f7; --color-desktop-1: #6366f1; ``` Chart components, tooltips, and legends read these variables for consistent theming. Switching between light and dark mode swaps in the correct set automatically. ### Color Distribution When you provide fewer colors than segments need, they're **evenly distributed** across slots: - 2 colors for 4 slots: `[red, red, pink, pink]` - 3 colors for 4 slots: `[red, pink, blue, blue]` So 2-3 gradient stops smoothly span any number of data points. ## Runtime Validation The config is validated at runtime. An empty `colors` object, or one without a valid theme key, throws a clear error: ```plaintext [EvilCharts] Invalid chart config for "desktop": colors object must have at least one theme key (light, dark). Received empty object or invalid keys. ``` ## Examples ### Default (Labels + Colors) Labels and theme-aware colors. The label shows in the tooltip and legend; the colors control the fill. ### Basic chart config ```tsx "use client"; import { EvilBarChart } from "@/components/evilcharts/charts/recharts-bar-chart"; import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart"; const data = [ { month: "January", desktop: 342, mobile: 184 }, { month: "February", desktop: 876, mobile: 491 }, { month: "March", desktop: 512, mobile: 290 }, { month: "April", desktop: 629, mobile: 391 }, { month: "May", desktop: 458, mobile: 309 }, { month: "June", desktop: 781, mobile: 449 }, { month: "July", desktop: 394, mobile: 234 }, { month: "August", desktop: 925, mobile: 557 }, { month: "September", desktop: 647, mobile: 367 }, { month: "October", desktop: 532, mobile: 357 }, { month: "November", desktop: 803, mobile: 515 }, { month: "December", desktop: 271, mobile: 149 }, ]; const chartConfig = { desktop: { label: "Desktop", // [!code highlight] colors: { light: ["#047857"], // [!code highlight] dark: ["#10b981"], // [!code highlight] }, }, mobile: { label: "Mobile", // [!code highlight] colors: { light: ["#be123c"], // [!code highlight] dark: ["#f43f5e"], // [!code highlight] }, }, } satisfies ChartConfig; export function EvilExampleChartConfigDefaultBarChart() { return ( value.substring(0, 3)} /> ); } ``` ### With Icons Pass an `icon` component per entry to replace the default color indicator in the tooltip and legend. ### Chart config with icons ```tsx "use client"; import { EvilBarChart } from "@/components/evilcharts/charts/recharts-bar-chart"; import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart"; import { Monitor, Smartphone } from "lucide-react"; const data = [ { month: "January", desktop: 342, mobile: 184 }, { month: "February", desktop: 876, mobile: 491 }, { month: "March", desktop: 512, mobile: 290 }, { month: "April", desktop: 629, mobile: 391 }, { month: "May", desktop: 458, mobile: 309 }, { month: "June", desktop: 781, mobile: 449 }, { month: "July", desktop: 394, mobile: 234 }, { month: "August", desktop: 925, mobile: 557 }, { month: "September", desktop: 647, mobile: 367 }, { month: "October", desktop: 532, mobile: 357 }, { month: "November", desktop: 803, mobile: 515 }, { month: "December", desktop: 271, mobile: 149 }, ]; const chartConfig = { desktop: { label: "Desktop", icon: Monitor, // [!code highlight] colors: { light: ["#047857"], dark: ["#10b981"], }, }, mobile: { label: "Mobile", icon: Smartphone, // [!code highlight] colors: { light: ["#be123c"], dark: ["#f43f5e"], }, }, } satisfies ChartConfig; export function EvilExampleChartConfigIconsBarChart() { return ( value.substring(0, 3)} /> ); } ``` ### Gradient Colors Pass multiple colors per theme for gradient fills. Each array value is a stop distributed across the chart elements. ### Gradient colors ```tsx "use client"; import { EvilBarChart } from "@/components/evilcharts/charts/recharts-bar-chart"; import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart"; const data = [ { month: "January", desktop: 342, mobile: 184 }, { month: "February", desktop: 876, mobile: 491 }, { month: "March", desktop: 512, mobile: 290 }, { month: "April", desktop: 629, mobile: 391 }, { month: "May", desktop: 458, mobile: 309 }, { month: "June", desktop: 781, mobile: 449 }, { month: "July", desktop: 394, mobile: 234 }, { month: "August", desktop: 925, mobile: 557 }, { month: "September", desktop: 647, mobile: 367 }, { month: "October", desktop: 532, mobile: 357 }, { month: "November", desktop: 803, mobile: 515 }, { month: "December", desktop: 271, mobile: 149 }, ]; const chartConfig = { desktop: { label: "Desktop", colors: { light: ["#a855f7", "#6366f1", "#3b82f6"], // [!code highlight] dark: ["#f43f5e", "#ec4899", "#a855f7", "#6366f1", "#3b82f6"], // [!code highlight] }, }, mobile: { label: "Mobile", colors: { light: ["#10b981", "#34d399", "#6ee7b7"], // [!code highlight] dark: ["#10b981", "#14b8a6", "#06b6d4"], // [!code highlight] }, }, } satisfies ChartConfig; export function EvilExampleBarChart() { return ( value.substring(0, 3)} /> ); } ``` ## API Reference ### `label` type: `React.ReactNode` Name for the data series, shown in tooltips and legends. ### `colors` type: `{ light?: string[]; dark?: string[] }` Theme-aware colors. Include at least one theme key (`light` or `dark`), each mapping to an array of CSS color strings. One color is a solid fill; multiple create a gradient. ### `icon` type: `React.ComponentType` Optional React component rendered in place of the default color indicator in tooltips and legends. --- ## Introduction > Open-source, beautifully handcrafted chart components built with shadcn — on Recharts or Apache ECharts. Source: https://evilcharts.com/docs Markdown: https://evilcharts.com/docs.md --- title: Introduction description: Open-source, beautifully handcrafted chart components built with shadcn — on Recharts or Apache ECharts. image: /og/og-image.png --- Wait... it's not another chart library. I couldn't find chart components with smooth animations and dynamic data, so I built my own — with [Recharts](https://recharts.github.io/), [Apache ECharts](https://echarts.apache.org/) and [Shadcn](https://shadcn.com/ui). ## The Problem EvilCharts is built by [Gurbinder](https://x.com/legionsdev) (Design Engineer @ Axiom.co). I see ugly, generic charts everywhere, and no one in the community is building a beautiful chart library. There are tons of chart libraries, but none are beautiful. They allow customization, yet everyone just ships the defaults from the docs. So I'm building a beautiful chart component site — open source, open code, all yours... ## Why I named it EvilCharts? "Evil" doesn't mean malicious. It means: - Unapologetically opinionated UI choices - Design-first, animated, unique designs - Handcrafted with SVGs and [Motion](https://motion.dev) to stand out ## Two engines, same charts Every chart here ships twice — once on Recharts, once on Apache ECharts — behind the same compound API. Same parts, same config object, same gradients, patterns and reveal animations. Switching engines is a rename, not a rewrite: ```tsx {/* Recharts */} {/* ECharts */} ``` You install one engine per chart — `@evilcharts/recharts-area-chart` **or** `@evilcharts/echarts-area-chart`, never both — so you only ever ship the one you picked. ### Recharts **SVG, and all of it is in the DOM.** Recharts renders through React to SVG, so every gradient, pattern, dot and glow is a real element. - **Themeable without JavaScript.** Series colors compile to per-chart CSS variables, so light and dark swap with a class — no re-render, no flash. - **Inspectable.** Open devtools and the whole chart is right there, stylable with the CSS you already use. - **Composable.** Charts are built from parts, not props. Drop in a ``, a ``, or a second ``. Reach for it by default: product dashboards, marketing pages, anything where the chart is design surface first and data volume second. ### ECharts **Canvas by default, SVG when you need it.** The ECharts provider draws the same components with Canvas for scale, or on an SVG-backed chart surface when you pass `renderer="svg"` to a chart root. - **Dense data stays smooth.** With the default Canvas renderer, thousands of points are pixels, not thousands of nodes. - **Built for live data.** Frequent updates and zooming don't fight the browser's layout engine. - **Renderer per chart.** Keep Canvas for dense, frequently updated data, or select ECharts' SVG renderer without changing the compound API. - **Same look.** The variants, glows, and entrance animations are ported across ECharts renderers using renderer-aware gradients and patterns. Reach for it when the data outgrows the DOM: long time series, high-frequency updates, dashboards that keep drawing while people interact with them. ### Which one? Start with Recharts. Move a chart to ECharts when that specific chart gets heavy — it's a per-chart choice, not a project-wide one, so a single dashboard can mix both. Install one from the sidebar — [Recharts](/docs/recharts/installation) or [ECharts](/docs/echarts/installation) — and the labels, colors and icons are the same object either way: see [Chart Config](/docs/chart-config). --- ## Components > Every EvilCharts component. Source: https://evilcharts.com/docs/recharts/components Markdown: https://evilcharts.com/docs/recharts/components.md --- title: Components description: Every EvilCharts component. image: /og/og-image.png --- ## Charts - [Area Chart](/docs/recharts/area-chart) - Highlight trends with filled area ranges. - [Line Chart](/docs/recharts/line-chart) - Track change over time with lines. - [Bar Chart](/docs/recharts/bar-chart) - Compare categories quickly with bold bars. - [Composed Chart](/docs/recharts/composed-chart) - Mix lines, bars, areas in one. - [Radar Chart](/docs/recharts/radar-chart) - Compare multi-metric profiles on radial axes. - [Pie Chart](/docs/recharts/pie-chart) - Show parts of a whole, clearly. - [Radial Chart](/docs/recharts/radial-chart) - Visualize totals in a circular layout. - [Sankey Chart](/docs/recharts/sankey-chart) - Show flows between stages with weighted links. --- ## Installation > Install EvilCharts and add charts to your project Source: https://evilcharts.com/docs/recharts/installation Markdown: https://evilcharts.com/docs/recharts/installation.md --- title: Installation description: Install EvilCharts and add charts to your project image: /og/og-image.png --- EvilCharts is plug-and-play. Skip the heavy setup—follow these steps to add beautiful, interactive charts to your Next.js project. ## Steps ### Install Recharts Recharts powers every EvilCharts component and is a required dependency. See the [Recharts installation guide](https://recharts.github.io/en-US/guide/installation). ### npm ```bash npm install recharts ``` ### yarn ```bash yarn add recharts ``` ### bun ```bash bun add recharts ``` ### pnpm ```bash pnpm add recharts ``` ### Setup shadcn/ui Initialize shadcn/ui to set up Tailwind CSS, themes, and component structure. Skip this if it's already installed. See the [shadcn/ui Next.js installation docs](https://ui.shadcn.com/docs/installation/next). ### npm ```bash npx shadcn@latest add init ``` ### yarn ```bash yarn shadcn@latest add init ``` ### bun ```bash bunx --bun shadcn@latest add init ``` ### pnpm ```bash pnpm dlx shadcn@latest add init ``` ### Add EvilCharts Components Add chart components with the CLI. Replace `{chart-name}` with the chart you want (e.g., `area-chart`, `bar-chart`, `line-chart`, `pie-chart`); it installs all files and dependencies. ### npm ```bash npx shadcn@latest add @evilcharts/recharts-{chart-name} ``` ### yarn ```bash yarn shadcn@latest add @evilcharts/recharts-{chart-name} ``` ### bun ```bash bunx --bun shadcn@latest add @evilcharts/recharts-{chart-name} ``` ### pnpm ```bash pnpm dlx shadcn@latest add @evilcharts/recharts-{chart-name} ``` --- ## Area Chart > Static, beautifully designed area charts Source: https://evilcharts.com/docs/recharts/area-chart/static Markdown: https://evilcharts.com/docs/recharts/area-chart/static.md --- title: Area Chart description: Static, beautifully designed area charts image: /og/area-chart.png links: github: https://github.com/legions-developer/evilcharts/blob/main/src/registry/charts/recharts-area-chart.tsx doc: https://recharts.github.io/en-US/examples/SimpleAreaChart/ api: https://recharts.github.io/en-US/api/AreaChart/ --- ### Basic Chart ```tsx "use client"; import { EvilAreaChart } from "@/components/evilcharts/charts/recharts-area-chart"; import { type ChartConfig } from "@/components/evilcharts/ui/recharts-chart"; const data = [ { month: "January", desktop: 342, mobile: 245 }, { month: "February", desktop: 876, mobile: 654 }, { month: "March", desktop: 512, mobile: 387 }, { month: "April", desktop: 629, mobile: 521 }, { month: "May", desktop: 458, mobile: 412 }, { month: "June", desktop: 781, mobile: 598 }, { month: "July", desktop: 394, mobile: 312 }, { month: "August", desktop: 925, mobile: 743 }, { month: "September", desktop: 647, mobile: 489 }, { month: "October", desktop: 532, mobile: 476 }, { month: "November", desktop: 803, mobile: 687 }, { month: "December", desktop: 271, mobile: 198 }, ]; const chartConfig = { desktop: { label: "Desktop", colors: { light: ["#047857"], dark: ["#10b981"], }, }, mobile: { label: "Mobile", colors: { light: ["#be123c"], dark: ["#f43f5e"], }, }, } satisfies ChartConfig; export function EvilExampleAreaChart() { return ( value.substring(0, 3)} /> String(value).substring(0, 3)} /> ); } ``` ## Installation ### npm ```bash npx shadcn@latest add @evilcharts/recharts-area-chart ``` ### yarn ```bash yarn shadcn@latest add @evilcharts/recharts-area-chart ``` ### bun ```bash bunx --bun shadcn@latest add @evilcharts/recharts-area-chart ``` ### pnpm ```bash pnpm dlx shadcn@latest add @evilcharts/recharts-area-chart ``` ### Install the following dependencies: ### npm ```bash npm install recharts motion ``` ### yarn ```bash yarn add recharts motion ``` ### bun ```bash bun add recharts motion ``` ### pnpm ```bash pnpm add recharts motion ``` ### Copy the code snippets into your project. Inside `components`, create an `evilcharts` folder with a `charts` subfolder, then paste the base chart code into a new file there. ### components/evilcharts/charts/recharts-area-chart.tsx ```tsx "use client"; import { Children, createContext, isValidElement, use, useCallback, useId, useMemo, useRef, useState, type ComponentProps, type FC, type ReactElement, type ReactNode, } from "react"; import { axisValueToPercentFormatter, type ChartConfig, ChartContainer, getColorsCount, getLoadingData, LoadingIndicator, } from "@/components/evilcharts/ui/recharts-chart"; import { Area as RechartsArea, AreaChart as RechartsAreaChart, CartesianGrid, XAxis as RechartsXAxis, YAxis as RechartsYAxis, } from "recharts"; import { ChartTooltip, ChartTooltipContent, type TooltipRoundness, type TooltipVariant, } from "@/components/evilcharts/ui/recharts-tooltip"; import { Brush, EvilBrush, useEvilBrush, type BrushProps, type EvilBrushRange, } from "@/components/evilcharts/ui/recharts-brush"; import { ChartLegend, ChartLegendContent, type ChartLegendVariant, } from "@/components/evilcharts/ui/recharts-legend"; import { ChartDot, type DotVariant } from "@/components/evilcharts/ui/recharts-dot"; import { motion, useReducedMotion } from "motion/react"; // Constants const STROKE_WIDTH = 0.8; // default series stroke — overrides it const LOADING_AREA_DATA_KEY = "loading"; const LOADING_ANIMATION_DURATION = 2000; // in milliseconds const STACK_ID = "evil-stacked"; const REVEAL_DURATION = 1; // intro wipe length, in seconds const REVEAL_EASE: [number, number, number, number] = [0, 0.7, 0.5, 1]; // intro wipe easing type CurveType = ComponentProps["type"]; type AreaDotProp = ComponentProps["dot"]; type AreaActiveDotProp = ComponentProps["activeDot"]; type AreaVariant = "gradient" | "gradient-reverse" | "solid" | "dotted" | "lines" | "hatched"; type StrokeVariant = "solid" | "dashed" | "animated-dashed"; type StackType = "default" | "expanded" | "stacked"; /** * Direction of the custom motion.dev intro reveal. Recharts' own area animation * is permanently disabled (it drew the line after the dots had already popped * in) — these reveals replace it. * * NOTE: a reveal is a per-frame animated SVG mask, so it is heavier than a * static chart. `"none"` opts out entirely; it is also what a device with the * OS "reduce motion" preference falls back to automatically. */ type AreaAnimationType = "none" | "left-to-right" | "right-to-left" | "center-out" | "edges-in"; type RevealAnimationType = Exclude; // ───────────────────────────────────────────────────────────────────────────── // Shared context // ───────────────────────────────────────────────────────────────────────────── /** * Shared state for every part of the chart. Lifted into so that * , , , and friends can read it without prop drilling. * Sub-components are composed freely — the provider is the single source of truth. */ type AreaChartContextValue = { config: ChartConfig; // colors + labels for every series curveType: CurveType; // default curve interpolation each inherits animationType: AreaAnimationType; // default intro reveal each inherits isStacked: boolean; // whether areas stack on top of each other isExpanded: boolean; // whether the stack is normalized to 100% isLoading: boolean; // whether the chart shows its loading skeleton selectedDataKey: string | null; // currently selected series, or null when none selectDataKey: (dataKey: string | null) => void; // sets the selected series }; const AreaChartContext = createContext(null); // Reads the chart context, throwing a helpful error when used outside function useAreaChart() { const context = use(AreaChartContext); if (!context) { throw new Error( "Area chart parts (, , …) must be used within ", ); } return context; } // ───────────────────────────────────────────────────────────────────────────── // Root container // ───────────────────────────────────────────────────────────────────────────── // Validates that every config key also exists on the data row type type ValidateConfigKeys = { [K in keyof TConfig]: K extends keyof TData ? ChartConfig[string] : never; }; type EvilAreaChartBaseProps< TData extends Record, TConfig extends Record, > = { config: TConfig & ValidateConfigKeys; // series colors + labels data: TData[]; // rows rendered by the chart children: ReactNode; // composed parts — , , , … className?: string; // extra classes for the chart container chartProps?: ComponentProps; // escape hatch for the raw Recharts chart curveType?: CurveType; // default curve interpolation for every animationType?: AreaAnimationType; // default intro reveal for every stackType?: StackType; // how multiple areas combine defaultSelectedDataKey?: string | null; // series selected on first render onSelectionChange?: (selectedDataKey: string | null) => void; // fires when the selected series changes isLoading?: boolean; // shows the animated loading skeleton loadingPoints?: number; // number of points in the loading skeleton xDataKey?: keyof TData & string; // x-axis key — only needed for the footer }; type EvilAreaChartProps< TData extends Record, TConfig extends Record, > = EvilAreaChartBaseProps; /** * Root of the composible area chart. Owns the data, the shared context, the * loading skeleton, and the optional zoom brush. Everything visual — axes, * grid, tooltip, legend, and the areas themselves — is composed as children, * so a consumer renders exactly the parts they need. */ export function EvilAreaChart< TData extends Record, TConfig extends Record, >({ config, data, children, className, chartProps, curveType = "linear", animationType = "left-to-right", stackType = "default", defaultSelectedDataKey = null, onSelectionChange, isLoading = false, loadingPoints, xDataKey, }: EvilAreaChartProps) { const chartId = useId().replace(/:/g, ""); // colon-free id keeps CSS/SVG selectors valid const [selectedDataKey, setSelectedDataKey] = useState(defaultSelectedDataKey); const { loadingData, onShimmerExit } = useLoadingData(isLoading, loadingPoints); const { visibleData, brushProps } = useEvilBrush({ data }); // Brush is a child now (not props): pull it out of the children so // it never reaches the Recharts tree, and drive the footer from its props. const brush = useMemo(() => { // Pull the element out of the children (config-only, never rendered // into the Recharts tree); toArray also assigns stable keys to the rest. const parts = Children.toArray(children); const brushEl = parts.find((child) => isValidElement(child) && child.type === Brush); const bp = (isValidElement(brushEl) ? brushEl.props : {}) as BrushProps; return { slot: { present: isValidElement(brushEl), height: bp.height, formatLabel: bp.formatLabel, onChange: bp.onChange, }, chartChildren: parts.filter((child) => !(isValidElement(child) && child.type === Brush)), }; }, [children]); const showBrush = brush.slot.present; const isExpanded = stackType === "expanded"; const isStacked = stackType === "stacked" || isExpanded; const displayData = showBrush && !isLoading ? visibleData : data; // Updates selection state and notifies the parent const selectDataKey = useCallback( (newSelectedDataKey: string | null) => { setSelectedDataKey(newSelectedDataKey); onSelectionChange?.(newSelectedDataKey); }, [onSelectionChange], ); const contextValue = useMemo( () => ({ config, curveType, animationType, isStacked, isExpanded, isLoading, selectedDataKey, selectDataKey, }), [ config, curveType, animationType, isStacked, isExpanded, isLoading, selectedDataKey, selectDataKey, ], ); return ( { brushProps.onChange(range); brush.slot.onChange?.(range); }} /> ) } > {brush.chartChildren} {isLoading && ( )} ); } // ───────────────────────────────────────────────────────────────────────────── // Composible parts // ───────────────────────────────────────────────────────────────────────────── type AreaProps = { dataKey: string; // series key — must exist on the data and config variant?: AreaVariant; // fill style for this area only strokeVariant?: StrokeVariant; // stroke style for this area strokeWidth?: number; // stroke thickness in pixels for this area curveType?: CurveType; // curve interpolation — falls back to the chart default animationType?: AreaAnimationType; // intro reveal — falls back to the chart default connectNulls?: boolean; // join segments across null/missing values isClickable?: boolean; // lets this area be selected by clicking it children?: ReactNode; // optional and composition areaProps?: ComponentProps; // escape hatch for raw Recharts Area props }; /** * A single area series. Each is fully self-contained: it generates its * own gradient/pattern definitions under a unique id, so any number of areas — * each with its own variant, stroke, and clickability — can live in one chart * without style collisions. Compose and inside it to add * point markers. */ function Area({ dataKey, variant = "gradient", strokeVariant = "dashed", strokeWidth = STROKE_WIDTH, curveType, animationType, connectNulls = false, isClickable = false, children, areaProps, }: AreaProps) { const { config, curveType: defaultCurve, animationType: defaultAnimation, isStacked, isExpanded, isLoading, selectedDataKey, selectDataKey, } = useAreaChart(); const id = useId().replace(/:/g, ""); // unique id scopes this area's style defs // Devices set to "reduce motion" skip the intro reveal entirely const shouldReduceMotion = useReducedMotion(); // The root renders the skeleton area while loading, so real areas step aside if (isLoading) return null; const resolvedCurve = curveType ?? defaultCurve; // The reveal is an animated SVG mask — heavier than a static chart — so // `"none"` and the OS reduce-motion preference both opt out of it. const revealType: AreaAnimationType = shouldReduceMotion ? "none" : (animationType ?? defaultAnimation); const maskId = revealType === "none" ? undefined : `${id}-reveal-mask`; const isSelected = selectedDataKey === dataKey; const hasSelection = selectedDataKey !== null; const opacity = getOpacity(selectedDataKey, dataKey); const showUnselected = hasSelection && !isSelected; const { dot, activeDot } = resolveDots(children, id, dataKey, opacity.dot, maskId); const isAnimatedDashed = strokeVariant === "animated-dashed"; const isDashed = strokeVariant === "dashed" || isAnimatedDashed; return ( <> { if (!isClickable) return; // Clicking the selected area clears the selection, otherwise selects it selectDataKey(isSelected ? null : dataKey); }} {...areaProps} > {isAnimatedDashed && !hasSelection && } {revealType !== "none" && } {variant === "gradient" && } {variant === "gradient-reverse" && } {variant === "solid" && } {variant === "dotted" && } {variant === "lines" && } {variant === "hatched" && } {showUnselected && } ); } type DotProps = { variant?: DotVariant; // visual style of the point marker }; /** * Declares a resting point marker for the it is composed inside. * It renders nothing on its own — the parent reads its variant and * wires it into the Recharts dot slot. */ const Dot: FC = () => null; /** * Declares the hovered/active point marker for the it is composed * inside. Like , it is a configuration slot and renders nothing itself. */ const ActiveDot: FC = () => null; type XAxisProps = ComponentProps; /** * The horizontal category axis. Ships with the chart's flat default styling and * forwards every Recharts XAxis prop, so `dataKey`, `tickFormatter`, etc. are * passed straight through. Hidden automatically while the chart is loading. */ function XAxis({ tickLine = false, axisLine = false, tickMargin = 8, minTickGap = 8, ...props }: XAxisProps) { const { isLoading } = useAreaChart(); if (isLoading) return null; return ( ); } type YAxisProps = ComponentProps; /** * The vertical value axis. Forwards every Recharts YAxis prop and, when the * chart uses an expanded stack, formats ticks as percentages automatically. * Hidden automatically while the chart is loading. */ function YAxis({ tickLine = false, axisLine = false, tickMargin = 8, minTickGap = 8, width = "auto", tickFormatter, ...props }: YAxisProps) { const { isLoading, isExpanded } = useAreaChart(); if (isLoading) return null; return ( ); } type GridProps = ComponentProps; /** * The background grid lines. Defaults to horizontal-only dashed lines and * forwards every Recharts CartesianGrid prop for full control. */ function Grid({ vertical = false, strokeDasharray = "3 3", ...props }: GridProps) { return ; } type TooltipProps = { variant?: TooltipVariant; // visual style of the tooltip surface roundness?: TooltipRoundness; // border-radius of the tooltip defaultIndex?: number; // data index shown by default with no hover cursor?: boolean; // whether the vertical cursor line follows the pointer }; /** * The hover tooltip. Reads the chart's selection from context so its content * dims unselected series. Hidden automatically while the chart is loading. */ function Tooltip({ variant, roundness, defaultIndex, cursor = true }: TooltipProps) { const { isLoading, selectedDataKey } = useAreaChart(); if (isLoading) return null; return ( } /> ); } type LegendProps = { variant?: ChartLegendVariant; // visual style of the legend indicators align?: "left" | "center" | "right"; // horizontal placement verticalAlign?: "top" | "middle" | "bottom"; // vertical placement isClickable?: boolean; // lets each entry toggle selection of its series }; /** * The series legend. When `isClickable` is set, each entry toggles selection of * its series, driving the shared selection state read by every . */ function Legend({ variant, align = "right", verticalAlign = "top", isClickable = false, }: LegendProps) { const { selectedDataKey, selectDataKey } = useAreaChart(); return ( } /> ); } // ───────────────────────────────────────────────────────────────────────────── // Selection + dot helpers // ───────────────────────────────────────────────────────────────────────────── // Returns fill/stroke/dot opacity — dims a series only when another is selected const getOpacity = (selectedDataKey: string | null, dataKey: string) => { if (selectedDataKey === null) { return { fill: 0.8, stroke: 1, dot: 1 }; } return selectedDataKey === dataKey ? { fill: 0.8, stroke: 1, dot: 1 } : { fill: 0.1, stroke: 0.3, dot: 0.3 }; }; // Resolves the SVG paint reference for an area's fill based on its variant const getFillPattern = (variant: AreaVariant, showUnselected: boolean, id: string): string => { // A non-selected area in a clickable chart is striped to recede visually if (showUnselected) return `url(#${id}-unselected)`; return `url(#${id}-${variant})`; }; // Pulls and out of an area's children into Recharts dot slots. // When a `maskId` is given the resting dot is wired to the intro reveal mask so it // wipes in with the line; the active dot is always left unmasked since it only // appears on hover, after the intro has finished. const resolveDots = ( children: ReactNode, id: string, dataKey: string, dotOpacity: number, maskId: string | undefined, ): { dot: AreaDotProp; activeDot: AreaActiveDotProp } => { let dot: AreaDotProp = false; let activeDot: AreaActiveDotProp = false; Children.forEach(children, (child) => { if (!isValidElement(child)) return; if (child.type === Dot) { const { variant } = (child as ReactElement).props; dot = ( ); } if (child.type === ActiveDot) { const { variant } = (child as ReactElement).props; activeDot = ( ); } }); return { dot, activeDot }; }; // ───────────────────────────────────────────────────────────────────────────── // Style definitions — one set per , scoped to its unique id // ───────────────────────────────────────────────────────────────────────────── type StyleProps = { id: string; // unique id of the owning dataKey: string; // series key the colors belong to }; // Animated dashed-stroke effect, rendered as a child of the Recharts Area const AnimatedDashedStroke = () => { return ( <> ); }; // motion `originX` for each single-rect reveal — the edge the wipe grows from. // 0 = left edge, 1 = right edge, 0.5 = centre (grows outward to both edges). const SINGLE_REVEAL_ORIGIN: Record, number> = { "left-to-right": 0, "right-to-left": 1, "center-out": 0.5, }; /** * Wipe mask driven by motion.dev, played once when an mounts. The same * mask is applied to the area's fill, stroke, and resting dots, so all three * reveal in lockstep — fixing Recharts' default, where the dots appeared before * the line had finished drawing. * * `maskUnits`/`maskContentUnits` are both userSpaceOnUse so every masked element * shares one coordinate space and the wipe edge lands at the same x on each. * * Each rect animates `scaleX` 0 → 1; `originX` decides which edge it grows from. * "edges-in" needs two rects — each half grows inward from an opposite edge. */ const RevealMask = ({ id, type }: { id: string; type: RevealAnimationType }) => { const reveal = { initial: { scaleX: 0 }, animate: { scaleX: 1 }, transition: { duration: REVEAL_DURATION, ease: REVEAL_EASE }, }; return ( {type === "edges-in" ? ( <> {/* left half wipes inward from the left edge toward the centre */} {/* right half wipes inward from the right edge toward the centre */} ) : ( )} ); }; /** * Horizontal left-to-right color gradient for a series. Always rendered — every * fill variant, the stroke, and the dots all paint from this single gradient. */ const ColorGradient = ({ id, dataKey, config, isExpanded, }: StyleProps & { config: ChartConfig; isExpanded: boolean }) => { const colorsCount = getColorsCount(config[dataKey] ?? {}); return ( {colorsCount === 1 ? ( <> ) : ( Array.from({ length: colorsCount }, (_, index) => { const offset = `${(index / (colorsCount - 1)) * 100}%`; return ( ); }) )} ); }; /** Gradient fill that fades from visible at the top to transparent at the bottom. */ const GradientPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Gradient fill that fades from transparent at the top to visible at the bottom. */ const ReverseGradientPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Uniform low-opacity gradient fill with no vertical fade. */ const SolidPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Diagonal-line texture fill, masked from the series color gradient. */ const LinesPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Dotted texture fill, masked from the series color gradient. */ const DottedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Hatched striped fill with a soft gradient across each stripe. */ const HatchedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; /** Diagonal-line fill used to push a non-selected area into the background. */ const UnselectedPattern = ({ id, dataKey }: StyleProps) => { return ( <> ); }; // ───────────────────────────────────────────────────────────────────────────── // Loading skeleton // ───────────────────────────────────────────────────────────────────────────── // Builds bell-curve eased gradient stops for the loading shimmer const generateEasedGradientStops = ( steps: number = 17, minOpacity: number = 0.05, maxOpacity: number = 0.9, ) => { return Array.from({ length: steps }, (_, i) => { const t = i / (steps - 1); // 0 to 1 // Sine-based bell curve easing: peaks at center (t=0.5), smooth falloff at edges const eased = Math.sin(t * Math.PI) ** 2; const opacity = minOpacity + eased * (maxOpacity - minOpacity); return { offset: `${(t * 100).toFixed(0)}%`, opacity: Number(opacity.toFixed(3)) }; }); }; /** * Hook to manage loading data with pixel-perfect shimmer synchronization. * * Uses motion.dev's onUpdate callback to ensure chart data is only regenerated * when the shimmer has completely exited the visible area. This eliminates * timing drift issues from setTimeout/setInterval. */ export function useLoadingData(isLoading: boolean, loadingPoints: number = 14) { const [loadingDataKey, setLoadingDataKey] = useState(false); // Callback fired by motion.dev when the shimmer exits the visible area const onShimmerExit = useCallback(() => { if (isLoading) { setLoadingDataKey((prev) => !prev); } }, [isLoading]); const loadingData = useMemo( () => getLoadingData(loadingPoints), // loadingDataKey toggle triggers re-computation when the shimmer exits // eslint-disable-next-line react-hooks/exhaustive-deps [loadingPoints, loadingDataKey], ); return { loadingData, onShimmerExit }; } /** * The skeleton area shown while the chart is loading. Rendered by the root in * place of the real areas, paired with its own masked shimmer pattern. */ const LoadingArea = ({ chartId, curveType, onShimmerExit, }: { chartId: string; curveType: CurveType; onShimmerExit: () => void; }) => { return ( <> ); }; /** * Animated shimmer pattern for the loading skeleton. * * The visible chart area is normalized to 0-1, the shimmer gradient has width 1, * and the pattern is 3x wide so the shimmer has buffer on both sides. The motion * rect travels x from -1 to 2; onShimmerExit fires as it crosses x=1, letting the * data swap happen while the shimmer is off-screen for a seamless loop. */ const LoadingPattern = ({ chartId, onShimmerExit, }: { chartId: string; onShimmerExit: () => void; }) => { const gradientStops = generateEasedGradientStops(); // 1 (left buffer) + 1 (visible) + 1 (right buffer) const patternWidth = 3; const startX = -1; const endX = 2; // Tracks the last x value to detect the exit threshold crossing const lastXRef = useRef(startX); return ( <> {gradientStops.map(({ offset, opacity }) => ( ))} { const xValue = typeof latest.x === "number" ? latest.x : startX; const lastX = lastXRef.current; // Fire once per loop, when the shimmer fully exits the visible area if (xValue >= 1 && lastX < 1) { onShimmerExit(); } lastXRef.current = xValue; }} /> ); }; // Compound API: every part hangs off the root as a static member, so a consumer // writes , , … from a single import // — no colliding named marker exports when several charts share one file. EvilAreaChart.Area = Area; EvilAreaChart.Dot = Dot; EvilAreaChart.ActiveDot = ActiveDot; EvilAreaChart.XAxis = XAxis; EvilAreaChart.YAxis = YAxis; EvilAreaChart.Grid = Grid; EvilAreaChart.Tooltip = Tooltip; EvilAreaChart.Legend = Legend; EvilAreaChart.Brush = Brush; ``` ### Add the main chart component. The chart needs these components to render. Create a `ui` folder inside `evilcharts` and paste the code there. Below is the main chart component. ### components/evilcharts/ui/recharts-chart.tsx ```tsx "use client"; import * as RechartsPrimitive from "recharts"; import { cn } from "@/lib/utils"; import * as React from "react"; // Format: { THEME_NAME: CSS_SELECTOR } const THEMES = { light: "", dark: ".dark" } as const; type ThemeKey = keyof typeof THEMES; // All Keys are optional at first type ThemeColorsBase = { [K in ThemeKey]?: string[]; }; // Require at least one theme key type AtLeastOneThemeColor = { [K in ThemeKey]: Required> & Partial>; }[ThemeKey]; const VALID_THEME_KEYS = Object.keys(THEMES) as ThemeKey[]; // Validation for chart config colors at runtime function validateChartConfigColors(config: ChartConfig): void { for (const [key, value] of Object.entries(config)) { if (value.colors) { const hasValidThemeKey = VALID_THEME_KEYS.some( (themeKey) => value.colors?.[themeKey] !== undefined, ); if (!hasValidThemeKey) { throw new Error( `[EvilCharts] Invalid chart config for "${key}": colors object must have at least one theme key (${VALID_THEME_KEYS.join(", ")}). Received empty object or invalid keys.`, ); } } } } export type ChartConfig = Record< string, { label?: React.ReactNode; icon?: React.ComponentType; colors?: AtLeastOneThemeColor; } >; interface ChartContextProps { config: ChartConfig; } const ChartContext = React.createContext(null); export function useChart() { const context = React.useContext(ChartContext); if (!context) { throw new Error("useChart must be used within a "); } return context; } interface ChartContainerProps extends Omit, "children">, Pick< React.ComponentProps, | "initialDimension" | "aspect" | "debounce" | "minHeight" | "minWidth" | "maxHeight" | "height" | "width" | "onResize" | "children" > { config: ChartConfig; innerResponsiveContainerStyle?: React.ComponentProps< typeof RechartsPrimitive.ResponsiveContainer >["style"]; /** Optional content rendered below the chart (e.g. EvilBrush) */ footer?: React.ReactNode; } function ChartContainer({ id, config, initialDimension = { width: 320, height: 200 }, className, children, footer, ...props }: Readonly) { const uniqueId = React.useId(); const chartId = `chart-${id ?? uniqueId.replace(/:/g, "")}`; // Validate chart config at runtime validateChartConfigColors(config); return (
{children} {footer}
); } function LoadingIndicator({ isLoading }: { isLoading: boolean }) { if (!isLoading) { return null; } return (
Loading
); } // Distribute colors evenly across slots, extra slots go to last color(s) // Example: 2 colors for 4 slots → [red, red, pink, pink] // Example: 3 colors for 4 slots → [red, pink, blue, blue] function distributeColors(colorsArray: string[], maxCount: number): string[] { const availableCount = colorsArray.length; if (availableCount >= maxCount) { return colorsArray.slice(0, maxCount); } const result: string[] = []; const baseSlots = Math.floor(maxCount / availableCount); const extraSlots = maxCount % availableCount; // First (availableCount - extraSlots) colors get baseSlots each // Last extraSlots colors get (baseSlots + 1) each for (let colorIdx = 0; colorIdx < availableCount; colorIdx++) { const isExtraColor = colorIdx >= availableCount - extraSlots; const slotsForThisColor = baseSlots + (isExtraColor ? 1 : 0); for (let j = 0; j < slotsForThisColor; j++) { result.push(colorsArray[colorIdx]); } } return result; } const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => { const colorConfig = Object.entries(config).filter(([, config]) => config.colors); if (!colorConfig.length) { return null; } const generateCssVars = (theme: keyof typeof THEMES) => colorConfig .flatMap(([key, itemConfig]) => { const colorsArray = itemConfig.colors?.[theme]; if (!colorsArray || !Array.isArray(colorsArray) || colorsArray.length === 0) { return []; } // Get max count across all themes for this key const maxCount = getColorsCount(itemConfig); // Distribute colors evenly across all required slots const distributedColors = distributeColors(colorsArray, maxCount); return distributedColors.map((color, index) => ` --color-${key}-${index}: ${color};`); }) .filter(Boolean) .join("\n"); const css = Object.entries(THEMES) .map( ([theme, prefix]) => `${prefix} [data-chart=${id}] {\n${generateCssVars(theme as keyof typeof THEMES)}\n}`, ) .join("\n"); return