Recharts

Recharts builds charts from React components: a chart, its axes and one element per series. ChartContainer sizes the chart and paints its grid, axes, cursor and labels with your theme, in light and dark mode, compact mode and inside a ThemeScope.

Set palette to mono for shades of one color, accent for one color and grays, or multi for a color per series.

Set emphasis to strong to draw every series one step darker, for small marks or a busy page.

Pass color to build mono and accent from another color, here the emerald palette instead of the primary color.

Wrap a card in ChartPalette so the chart and the legend beside it, which reads chartColors.series, use the same palette.

On This Page