Chart
Recharts with the kit's tooltip, legend and series tokens.
Overview
Charts are recharts, wrapped: ChartContainer takes a config that maps series
keys to labels, icons and colors (exposed as --color-<key> CSS vars), and
ChartTooltip/ChartLegend render the kit-styled tooltip bubble and legend.
Series colors come from the theme's --chart-1…5 tokens, defined from the
Morpha tonal palettes for both light and dark.
$ npx morpha-ui add chartInstallation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add chart. In the meantime, since this is the base shadcn component, you can also
add it directly:
npx shadcn@latest add chartAPI Reference
Prop
Type
Accessibility
- Pass
accessibilityLayerto recharts charts for keyboard navigation and screen-reader descriptions of data points. - Don't rely on color alone to distinguish series — the legend labels and tooltip values carry the information too.