Chart — Design System

Props

The full prop API for Chart. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.

Prop	Type	Default	Description	Since
`config`	`ChartConfig`	—	Maps data keys to labels, colors, and optional icons. Required on ChartContainer.	0.6.0
`initialDimension`	`{ width: number; height: number }`	`{ width: 320, height: 200 }`	Server-safe initial size forwarded to Recharts ResponsiveContainer.	0.8.2
`indicator`	`'dot' \| 'line' \| 'dashed'`	`'dot'`	Tooltip indicator style. On ChartTooltipContent.	0.6.0
`hideLabel`	`boolean`	`false`	Hides the tooltip label row. On ChartTooltipContent.	0.6.0
`hideIndicator`	`boolean`	`false`	Hides the color indicator dot/line. On ChartTooltipContent.	0.6.0
`nameKey`	`string`	—	Config key used by tooltip or legend content for labels.	0.6.0
`labelKey`	`string`	—	Payload/config key used for tooltip label resolution.	0.6.0
`formatter`	`DefaultTooltipContentProps["formatter"]`	—	Recharts tooltip formatter passthrough. On ChartTooltipContent.	0.8.2
`hideIcon`	`boolean`	`false`	Hides legend marker icons. On ChartLegendContent.	0.8.2
`Recharts props`	`Recharts component props`	—	All chart root, axis, grid, series, reference, brush, sync, animation, formatter, hook, and event props stay on Recharts primitives composed inside ChartContainer.	0.8.2
`className`	`string`	—	Additional Tailwind classes.	0.6.0

Upstream library

This component intentionally keeps the MiHCM API small while preserving the supported upstream behavior listed below. Use these links when you need the full underlying option surface.

Recharts API — ChartContainer is a theme shell; chart roots, axes, grids, sync, events, animation, and series props stay on Recharts primitives.

Import

import { ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, ChartLegendContent, type ChartConfig } from '@mihcm/ui/Chart';