Charts

The Mukoko Registry provides chart components built on Recharts, wrapped in a ChartContainer that automatically applies the Five African Minerals color palette. Charts adapt between light and dark themes using the --chart-* tokens.

Installation

npx shadcn@latest add https://registry.mukoko.com/api/v1/ui/chart

This installs the ChartContainer, ChartTooltip, ChartTooltipContent, ChartLegend, and ChartLegendContent components.

Chart colors

Charts use five theme-adaptive color tokens:

Use these tokens sequentially for chart data series to maintain color consistency across all Mukoko apps.

Chart types

Basic usage

All charts follow the same pattern: wrap a Recharts chart in ChartContainer with a config object:

import { ChartContainer, ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
import { AreaChart, Area, XAxis, YAxis } from "recharts"
 
const chartConfig = {
  visitors: { label: "Visitors", color: "var(--chart-1)" },
}
 
<ChartContainer config={chartConfig} className="h-[300px]">
  <AreaChart data={data}>
    <XAxis dataKey="month" />
    <YAxis />
    <Area dataKey="visitors" fill="var(--chart-1)" stroke="var(--chart-1)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </AreaChart>
</ChartContainer>

The ChartContainer provides:

• Responsive sizing
• Theme-aware colors via CSS custom properties
• Accessible labeling