Charts

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

Installation

npx shadcn@latest add @iconiq/charts

File Structure

Usage

"use client";

import { BarChart, CartesianGrid, XAxis } from "recharts";
import {
  ChartBar,
  ChartContainer,
  ChartLegend,
  ChartTooltip,
  type ChartConfig,
} from "@/components/ui/charts";

const chartData = [
  { month: "Jan", sessions: 1240, conversions: 420 },
  { month: "Feb", sessions: 1580, conversions: 510 },
  { month: "Mar", sessions: 1420, conversions: 480 },
  { month: "Apr", sessions: 1890, conversions: 620 },
  { month: "May", sessions: 1760, conversions: 590 },
  { month: "Jun", sessions: 2100, conversions: 710 },
];

const chartConfig = {
  sessions: { label: "Sessions", color: "var(--chart-1)" },
  conversions: { label: "Conversions", color: "var(--chart-2)" },
} satisfies ChartConfig;

export function ChartsUsage() {
  return (
    <ChartContainer className="w-full max-w-lg" config={chartConfig}>
      <BarChart accessibilityLayer data={chartData}>
        <CartesianGrid vertical={false} />
        <XAxis
          axisLine={false}
          dataKey="month"
          tickFormatter={(value) => value.slice(0, 3)}
          tickLine={false}
          tickMargin={10}
        />
        <ChartTooltip cursor={false} />
        <ChartLegend />
        <ChartBar dataKey="sessions" fill="var(--color-sessions)" radius={4} seriesIndex={0} />
        <ChartBar dataKey="conversions" fill="var(--color-conversions)" radius={4} seriesIndex={1} />
      </BarChart>
    </ChartContainer>
  );
}

Props

Props
Description

ChartContainer

config

Series labels, optional icons, and colors. Use var(--chart-1) style tokens or per-key theme overrides; scoped --color-{key} variables are generated for this chart instance.

Type ChartConfig

children

Recharts chart markup, usually a BarChart, LineChart, AreaChart, PieChart, RadarChart, or RadialBarChart rendered inside ResponsiveContainer.

Type ReactNode

id

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

Type string

seriesCount

Overrides inferred series count for animation timing when ChartConfig keys do not match plotted series.

Type number

initialDimension

Optional fallback size for ResponsiveContainer before the first measure. By default the chart fills its parent with a debounced resize handler.

Type { width: number; height: number }

className

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

Type string

ChartBar

seriesIndex

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

Type number·Default 0

...props

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

Type Recharts Bar props

ChartLine

seriesIndex

Offsets line draw start time for multi-series charts so each stroke eases in with a short stagger.

Type number·Default 0

...props

Forwards the full Line API. animationDuration, easing, and isAnimationActive inherit calm defaults unless you override them.

Type Recharts Line props

ChartArea

seriesIndex

Offsets area reveal start time for multi-series charts so each fill eases in with a short stagger.

Type number·Default 0

...props

Forwards the full Area API. animationDuration, easing, and isAnimationActive inherit calm defaults unless you override them.

Type Recharts Area props

ChartTooltip

content

Tooltip renderer. Defaults to ChartTooltipContent when omitted.

Type ReactNode | ComponentType

cursor

Recharts cursor configuration for hover feedback.

Type boolean | object

ChartTooltipContent

indicator

Marker style rendered beside each tooltip row.

Type "dot" | "line" | "dashed"·Default "dot"

hideLabel

Suppresses the formatted label block above the value rows.

Type boolean·Default false

hideIndicator

Hides the color marker when you only want text values.

Type boolean·Default false

nameKey

Payload key used to resolve ChartConfig labels and colors for each tooltip row.

Type string

labelKey

Payload key used to resolve the tooltip label row from ChartConfig.

Type string

label

Optional label key override when you want the tooltip header to read from ChartConfig directly.

Type string

labelClassName

Classes merged onto the tooltip label row.

Type string

className

Classes merged onto the tooltip shell.

Type string

color

Optional shared indicator color override for every tooltip row.

Type string

labelFormatter

Custom formatter for the tooltip label row.

Type (value, payload) => ReactNode

formatter

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

Type Recharts formatter

ChartLegend

content

Legend renderer. Defaults to ChartLegendContent when omitted.

Type ReactNode | ComponentType

verticalAlign

Adjusts legend spacing relative to the chart.

Type "top" | "bottom"·Default "bottom"

ChartLegendContent

hideIcon

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

Type boolean·Default false

nameKey

Payload key used to resolve ChartConfig labels and swatch colors for each legend row.

Type string

verticalAlign

Adjusts legend spacing relative to the chart.

Type "top" | "bottom"·Default "bottom"

className

Classes merged onto the legend shell.

Type string

ChartEmptyState

label

Primary empty-state message.

Type ReactNode·Default "No data available"

description

Optional supporting copy beneath the label.

Type ReactNode

className

Classes merged onto the empty-state shell.

Type string

useChart

config

The ChartConfig passed to ChartContainer.

Type ChartConfig

chartAnimationActive

True during the first ease-out series animation window, then false after resize-safe timing completes.

Type boolean

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.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.