Chart

Recharts composition layer with ChartContainer, tooltips, and theme tokens.

Preview

Interactive examples use the same @flux/ui build as production. Toggle theme in the header for light and dark. Motion tokens and layout patterns live under Motion and Patterns in the sidebar.

Live preview

Bar chart with tooltip and legend (ChartLegend + ChartLegendContent).

Installation

Add the package to your app (full Next.js + Tailwind steps on Installation):

npm install @payglocal_ui/flux-ui

Usage

Import

import {
  ChartContainer,
  ChartTooltip,
  ChartTooltipContent,
  type ChartConfig,
} from "@payglocal_ui/flux-ui";
import { Bar, BarChart, XAxis } from "recharts";

Example

const config = {
  sales: { label: "Sales", color: "var(--chart-1)" },
} satisfies ChartConfig;

<ChartContainer config={config} className="h-48">
  <BarChart data={[{ m: "Jan", sales: 12 }]}>
    <XAxis dataKey="m" />
    <ChartTooltip content={<ChartTooltipContent />} />
    <Bar dataKey="sales" fill="var(--color-chart-1)" radius={4} />
  </BarChart>
</ChartContainer>