Examples
AreaChart — Default
AreaChart — With Legend
AreaChart — Stacked
AreaChart — Multi Series
AreaChart — Linear
BarChart — Default
BarChart — Negative Values
BarChart — With Legend
Props
ChartCard
Wraps any chart with a structured header containing title, subtitle, optional trend indicator, date range label, info tooltip, and a loading skeleton state. Athierarchy="primary" this implements the V2 Insight Card surface, which differs from Card’s own primary hierarchy: a white fill, the strong border, and a 12px radius.
ReactNode
required
Card title text. Pass translated string for i18n.
ReactNode
Chart content rendered below the header.
ReactNode
Date range or period label shown below the subtitle.
"primary" | "secondary"
default:"primary"
Surface treatment.
primary follows the V2 Insight Card spec (white fill, strong border, 12px radius); secondary uses the Card secondary surface.boolean
default:"false"
Show loading skeleton instead of content.
ReactNode
Large subtitle value (e.g. formatted price or count).
ReactNode
Tooltip text shown next to the title. Pass translated string for i18n.
string
default:"More info"
Accessible label for the info tooltip trigger. Override for i18n.
{ label: ReactNode; trend: "negative" | "positive"; }
Trend indicator config. Rendered as a coloured directional arrow and label beside the subtitle, so it is only shown when
subtitle is provided.ChartCenterLabel
Centered label for radial/pie charts, rendered inside a Recharts<Label>.
ReactNode
required
Secondary text below the value.
ReactNode
required
Primary value displayed in the center.
string
default:"fill-content-primary font-bold text-3xl"
Custom className for the value tspan.
{ [key: string]: unknown; cx?: number; cy?: number; } | undefined
Recharts viewBox with center coordinates.
ChartContainer
Wraps a Recharts chart with responsive sizing, design-token theming, and accessible config context for tooltips and legends.ReactNode
required
Recharts chart element(s) to render inside the responsive container. Typically a single
<AreaChart>, <BarChart>, <LineChart>, etc.ChartConfig
required
Series configuration mapping data keys to labels, colors, and icons.
ChartLegend
Re-export of RechartsLegend — use with content={<ChartLegendContent />}.
A direct re-export of RechartsLegend from recharts, provided so a chart can be assembled from one import. Its props are recharts’s own — see the recharts documentation.
ChartLegendContent
Styled legend content for use with<ChartLegend content={<ChartLegendContent />} />.
Reads chart config from context to resolve labels and icons.
boolean
default:"false"
Hide the color/icon indicator.
string
Data key used to resolve the display name from config.
readonly LegendPayload[]
Legend payload data. Passed by Recharts.
"top" | "bottom"
default:"bottom"
Vertical alignment — controls padding direction.
ChartLoadingOverlay
A positioned overlay shown on top of chart content while it loads. The children are always rendered to maintain layout dimensions. By default the overlay is opaque and shows a wave-animatedChartSkeleton shaped like the chart. At variant={false} it falls back to a semi-transparent wash with a centred spinner.
ReactNode
required
Chart content to render underneath the overlay.
boolean
default:"false"
Whether to show the loading overlay.
string
default:"Loading chart"
Accessible name for the loading region, announced while
loading is true. Pass a translated string for i18n. Only applies to the skeleton path; the variant={false} spinner carries its own label.false | ChartSkeletonVariant
default:"area"
Shape of the wave-animated
ChartSkeleton shown while loading. Set it to match the chart underneath — circular for pie/radial, bar for bar charts. Pass false to fall back to the legacy centred spinner.ChartMetricTrend
The small area chart inside a metric tile, per theV2 Area Chart Item slot of the Figma insight card.
series is optional because the endpoints behind these cards often return a single scalar with no history. With nothing to plot the chart draws a flat line at the current value rather than collapsing the slot, so the card keeps the height and shape the design gives it. The line is deliberately level rather than shaped, so it asserts no history that the data cannot support.
"red" | "teal"
required
Gradient and stroke colour.
number
required
Current value. Also the flat-line height when
series is absent.number[]
History to plot. Needs more than one point to draw a shape.
ChartPieLegend
A side legend for pie/donut charts that shows each slice’s label, formatted value, and a proportional progress bar.ChartPieLegendItem[]
required
Legend items to display.
ChartSeriesToggle
Renders a wrapping row of toggleableChips that control which series are visible on a multi-series chart. Each chip sizes to its label, shows a series colour dot, and exposes its state through aria-pressed.
ChartSeriesToggleItem[]
required
Available series that can be toggled.
(value: Set<string>) => void
required
Called when a series is toggled. Receives the updated Set.
Set<string>
required
Set of currently visible series keys.
ChartSkeleton
A wave-animated placeholder shaped like the content it stands in for — a chart series, a ranked table, or a breakdown of labelled bars. Use it while data loads instead of a generic spinner, so the layout does not visibly shift once the real content renders. For a chart body, pass it toChartLoadingOverlay via its variant prop rather than rendering it directly. For a card body, pass it to ChartCard’s skeleton prop.
number
How many items to draw: rows for
table and rows, bars for bar. Match the count the loaded card will show, so the card does not resize once the real content arrives. Defaults to 5 rows, or 7 bars."area" | "table" | "line" | "bar" | "circular" | "rows"
default:"area"
Which shape to imitate.
ChartStyle
Injects a scoped<style> tag that maps each config entry to a --color-{key} CSS custom property, with light/dark theme support.
Rendered automatically by ChartContainer — you rarely need this directly.
ChartConfig
required
Chart configuration mapping data keys to colors and themes.
string
required
Unique identifier scoped to the chart instance.
ChartTooltip
Re-export of RechartsTooltip — use with content={<ChartTooltipContent />}.
A direct re-export of RechartsTooltip from recharts, provided so a chart can be assembled from one import. Its props are recharts’s own — see the recharts documentation.
ChartTooltipContent
Styled tooltip content for use with<ChartTooltip content={<ChartTooltipContent />} />.
Reads chart config from context to resolve labels, colors, and icons. Supports dot/line/dashed indicators. Pass translated labels in config for i18n.
boolean
Whether the tooltip is currently active/visible. Passed by Recharts.
string
Override indicator color for all rows.
((value: ValueType, name: NameType, item: Payload<ValueType, NameType>, index: number, ...
Custom value formatter.Full type:
((value: ValueType, name: NameType, item: Payload<ValueType, NameType>, index: number, payload: Payload<ValueType, NameType>[]) => ReactNode).boolean
default:"false"
Hide the color indicator beside each row.
boolean
default:"false"
Hide the tooltip header label.
"line" | "dot" | "dashed"
default:"dot"
Visual style of the color indicator.
string | number
Axis label. Passed by Recharts.
string
CSS class for the label element.
((label: string | number, payload: Payload<ValueType, NameType>[]) => ReactNode)
Custom label formatter.
string
Data key used to resolve the header label from config. Falls back to the first payload item’s
dataKey.string
Data key used to resolve the display name from config. Useful when the payload
name differs from the config key.Payload<ValueType, NameType>[]
Tooltip payload data. Passed by Recharts.
resolveConfigEntry
Resolves theChartConfig entry for a given tooltip/legend payload item. Recharts wraps the original data point inside payload.payload — this function checks both levels before falling back to a direct key lookup.
Takes no props of its own beyond the standard attributes of the element it renders.
useChart
Access the nearestChartContainer’s config. Throws if used outside a chart.
Takes no props of its own beyond the standard attributes of the element it renders.
Exported types
Also exported from@fanvue/ui/charts: ChartCardProps, ChartCenterLabelProps, ChartConfig, ChartConfigEntry, ChartContainerProps, ChartLegendContentProps, ChartLoadingOverlayProps, ChartMetricTrendColor, ChartMetricTrendProps, ChartPieLegendItem, ChartPieLegendProps, ChartSeriesToggleItem, ChartSeriesToggleProps, ChartSkeletonProps, ChartSkeletonVariant, ChartStyleProps, ChartThemeKey, ChartTooltipContentProps, ChartTooltipIndicator.
Setup: Installation · Theming · Subpath exports