Charts
iconiq-ui/chartsFreeComponent
Recharts shell with registry chart tokens, ease-out series growth, and calm tooltip and legend transitions.
Install it
npx shadcn@latest add https://www.iconiqui.com/r/charts.jsonSource
1"use client";23import { motion } from "motion/react";4import * as React from "react";5import type { TooltipValueType } from "recharts";6import * as RechartsPrimitive from "recharts";78import { cn } from "@/lib/utils";910// Format: { THEME_NAME: CSS_SELECTOR }11const THEMES = { light: "", dark: ".dark" } as const;1213export type ChartConfig = Record<14 string,15 {16 label?: React.ReactNode;17 icon?: React.ComponentType;18 } & (19 | { color?: string; theme?: never }20 | { color?: never; theme: Record<keyof typeof THEMES, string> }21 )22>;2324function getPayloadConfigFromPayload(25 config: ChartConfig,26 payload: unknown,27 key: string28) {29 if (typeof payload !== "object" || payload === null) {30 return undefined;31 }3233 const payloadPayload =34 "payload" in payload &&35 typeof payload.payload === "object" &&36 payload.payload !== null37 ? payload.payload38 : undefined;3940 let configLabelKey: string = key;4142 if (43 key in payload &&44 typeof payload[key as keyof typeof payload] === "string"45 ) {46 configLabelKey = payload[key as keyof typeof payload] as string;47 } else if (48 payloadPayload &&49 key in payloadPayload &&50 typeof payloadPayload[key as keyof typeof payloadPayload] === "string"51 ) {52 configLabelKey = payloadPayload[53 key as keyof typeof payloadPayload54 ] as string;55 }5657 return configLabelKey in config ? config[configLabelKey] : config[key];58}5960function getChartConfigKey(config: ChartConfig, payload: unknown, key: string) {61 if (typeof payload !== "object" || payload === null) {62 return key;63 }6465 const payloadPayload =66 "payload" in payload &&67 typeof payload.payload === "object" &&68 payload.payload !== null69 ? payload.payload70 : undefined;7172 let configLabelKey: string = key;7374 if (75 key in payload &&76 typeof payload[key as keyof typeof payload] === "string"77 ) {78 configLabelKey = payload[key as keyof typeof payload] as string;79 } else if (80 payloadPayload &&81 key in payloadPayload &&82 typeof payloadPayload[key as keyof typeof payloadPayload] === "string"83 ) {84 configLabelKey = payloadPayload[85 key as keyof typeof payloadPayload86 ] as string;87 }8889 if (configLabelKey in config) {90 return configLabelKey;91 }9293 return key in config ? key : key;94}9596function normalizeChartField(97 value: string | number | ((obj: unknown) => unknown) | undefined98) {99 return typeof value === "function" ? undefined : value;100}101102// … truncated
What it pulls in
npm packages
Files it writes
More from Iconiq UI
All 119 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Accordionaccordion | Iconiq UI | Components | Free | 2 deps | |
| AI Inputai-input | Iconiq UI | Components | Free | 3 deps | |
| Alertalert | Iconiq UI | Components | Free | 2 deps | |
| Avataravatar | Iconiq UI | Components | Free | 3 deps | |
| Accordion (Base UI)b-accordion | Iconiq UI | Components | Free | 2 deps | |
| Alert Dialog (Base UI)b-alert-dialog | Iconiq UI | Components | Free | 3 deps | |
| Autocomplete (Base UI)b-autocomplete | Iconiq UI | Components | Free | 3 deps | |
| Avatar (Base UI)b-avatar | Iconiq UI | Components | Free | 2 deps |
