Chart

A set of wrapper components that extend Recharts with styled tooltips, legends, and theme-aware colors. For full chart capabilities, refer to the Recharts documentation.

API Reference

ChartRoot

Container component that provides chart configuration context and wraps children in a ResponsiveContainer.

Prop	Type	Default	Description
config*	ChartConfig	-	Configuration object mapping data keys to labels, colors, and optional icons
className	string	-	Additional CSS classes for the container
style	React.CSSProperties	-	Inline styles (merged with generated CSS variables)
...props	React.ComponentProps<"div">	-	Standard div element props

ChartConfig

Configuration object that maps data keys to display properties. Each key corresponds to a dataKey used in your chart series.

Prop	Type	Default	Description
label*	string	-	Display label shown in tooltips and legends
color*	string	-	Color value (CSS color, HSL, or CSS variable)
icon	React.ComponentType<{ className?: string }>	-	Optional icon component displayed in tooltips and legends

ChartTooltipContent

Styled tooltip content component for use with Recharts Tooltip.

Prop	Type	Default	Description
indicator	'dot' \| 'line' \| 'dashed'	'dot'	Style of the color indicator next to each item
hideLabel	boolean	false	Hide the tooltip label/title
hideIndicator	boolean	false	Hide the color indicator
labelKey	string	-	Payload property to use as the tooltip label instead of the default label
nameKey	string	-	Payload property to use as item names instead of config labels
className	string	-	Additional CSS classes for the tooltip container
labelClassName	string	-	Additional CSS classes for the label
formatter	(value, name, item, index, payload) => ReactNode	-	Custom formatter function for tooltip values

ChartLegendContent

Styled legend content component for use with Recharts Legend.

Prop	Type	Default	Description
className	string	-	Additional CSS classes for the legend container
nameKey	string	-	Payload property to use as item names instead of config labels
verticalAlign	'top' \| 'bottom'	-	Vertical alignment (adjusts padding accordingly)

useChartContext

Hook to access the chart configuration from within child components.

Prop	Type	Description
config	ChartConfig	The chart configuration object passed to ChartRoot

Types

Type definitions exported from the chart package.

Prop	Type	Description
ChartConfig	Record<string, { label: string; color: string; icon?: ComponentType }>	Configuration object type for chart series
ChartRootProps	interface	Props for ChartRoot component
ChartTooltipContentProps	interface	Props for ChartTooltipContent component
ChartLegendContentProps	interface	Props for ChartLegendContent component
IndicatorType	'dot' \| 'line' \| 'dashed'	Tooltip indicator style type