Command Menu

Search documentation, components, and switch theme.

Atoms

Chart

Chart components built on Recharts.

shadcn/ui
Docs

Installation#

npx shadcn@latest add @formance/chart

Install the following dependencies:

npm install recharts

Copy and paste the following code into your project.

Update the import paths to match your project setup.

Usage#

import { ChartContainer, ChartTooltip, ChartTooltipContent } from '@/components/ui/chart'
const chartConfig = {
  transactions: {
    label: 'Transactions',
    color: 'hsl(var(--chart-1))',
  },
  payments: {
    label: 'Payments',
    color: 'hsl(var(--chart-2))',
  },
}

<ChartContainer config={chartConfig} className="min-h-[200px]">
  <BarChart data={data}>
    <Bar dataKey="transactions" fill="var(--color-transactions)" />
    <Bar dataKey="payments" fill="var(--color-payments)" />
    <ChartTooltip content={<ChartTooltipContent />} />
  </BarChart>
</ChartContainer>