iconiq
—Open GitHub

Charts

Recharts shell with theme-aware series colors for bar, line, and other chart types, plus fluid bar growth and calm tooltip fades.

Bar chart

Installation

npx shadcn@latest add @iconiq/charts

ReducedMotion

Pass reducedMotionwhen you want the installed component to settle into its quieter motion path immediately. Leaving the prop unset still respects the user's system-level reduced motion preference.

Bar chart

Props

ChartContainer

6 props

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.
reducedMotionboolean
Forces the calmer motion path for the surface reveal, tooltip, legend, and ChartBar timing while still honoring system reduced-motion preferences when unset.
classNamestring
Merged onto the chart shell alongside registry theme tokens.

Notes

Install @iconiq/iconiq-theme alongside charts so --chart-1 through --chart-5 are available through registryTheme.
Pair ChartContainer with Recharts primitives and ChartTooltip / ChartLegend helpers rather than Radix UI or Base UI wrappers.

ChartBar

2 props

Thin Recharts Bar wrapper with restrained ease-out growth timing tuned for the Iconiq motion profile.
seriesIndexnumber
Default0
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.

Notes

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.
When reduced motion is active, bar growth animation is disabled automatically.

ChartTooltip & ChartTooltipContent

5 props

Recharts tooltip primitive plus a styled 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
Defaultfalse
Suppresses the formatted label block above the value rows.
hideIndicatorboolean
Defaultfalse
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 & ChartLegendContent

2 props

Legend primitive with a quiet fade-and-rise entrance that matches the chart surface motion.
hideIconboolean
Defaultfalse
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.