Charts

Theme-aware Recharts for bar, line, and more—with motion and soft tooltips.

Installation

npx shadcn@latest add @iconiq/charts

Props

ChartContainer

Theme-aware Recharts shell that maps ChartConfig tokens to CSS variables, applies registry chart colors, and eases the surface in with fluid motion.

configChartConfig

Required

Series labels and colors. Use var(--chart-1) style tokens or per-key theme overrides; ChartStyle writes --color-{key} variables scoped to this chart instance.

childrenReactNode

Required

Recharts chart markup, usually a BarChart, LineChart, or AreaChart wrapped by ResponsiveContainer through this container.

idstring

Optional stable id for the generated data-chart attribute and scoped CSS variables.

initialDimension{ width: number; height: number }

Optional fallback size for ResponsiveContainer before the first measure. By default the chart fills its parent (100% width/height) with a debounced resize handler.

classNamestring

Merged onto the chart shell alongside the chart component's local theme tokens.

ChartContainer ships its own local --chart-1 through --chart-5 defaults, so chart installs do not need a shared theme helper.

Pair ChartContainer with Recharts primitives and ChartTooltip / ChartLegend helpers rather than Radix UI or Base UI wrappers.

ChartBar

Thin Recharts Bar wrapper with restrained ease-out growth timing tuned for the Iconiq motion profile.

seriesIndexnumber

Default 0

Offsets bar growth start time for multi-series charts so each series eases in with a short stagger.

...propsRecharts Bar props

Forwards the full Bar API. animationDuration (~480ms), ease-out easing, and isAnimationActive inherit calm defaults unless you override them.

Use fill="var(--color-desktop)" (or your config key) so bars pick up ChartConfig colors.

Bar growth runs once on first paint; resize uses a debounced container and skips repeat bar animations so narrowing the viewport stays stable.

ChartTooltip

Recharts tooltip primitive wired to the shared Iconiq chart tooltip content shell.

contentReactNode | ComponentType

Tooltip renderer. Defaults to ChartTooltipContent when omitted.

cursorboolean | object

Recharts cursor configuration for hover feedback.

ChartTooltipContent

Styled tooltip content shell with a soft spring entrance and dashed, dot, or line indicators.

indicator"dot" | "line" | "dashed"

Default "dot"

Marker style rendered beside each tooltip row.

hideLabelboolean

Default false

Suppresses the formatted label block above the value rows.

hideIndicatorboolean

Default false

Hides the color marker when you only want text values.

labelFormatter(value, payload) => ReactNode

Custom formatter for the tooltip label row.

formatterRecharts formatter

Optional per-row formatter; when omitted, the default label and value layout is used.

ChartLegend

Recharts legend primitive wired to the shared Iconiq legend content shell.

contentReactNode | ComponentType

Legend renderer. Defaults to ChartLegendContent when omitted.

verticalAlign"top" | "bottom"

Default "bottom"

Adjusts legend spacing relative to the chart.

ChartLegendContent

Legend content shell with a quiet fade-and-rise entrance that matches the chart surface motion.

hideIconboolean

Default false

Hides config icons and falls back to the color swatch derived from the series color.

verticalAlign"top" | "bottom"

Default "bottom"

Adjusts legend spacing relative to the chart.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: recharts, motion.

This page lives in the Components section, but the install is the shared Iconiq charts shell rather than a Radix UI or Base UI wrapper.

The provider switch is shown for section consistency, but both Radix UI and Base UI options are disabled because Charts does not ship primitive-specific variants.

The generated registry file is /r/charts.json.