Bar Chart

Vertical and horizontal bars with hatch, duotone, gradient, stripe, stack, and glow fills.

variant='default'

variant='hatched'

variant='duotone'

variant='duotone-reverse'

variant='gradient'

variant='stripped'

stackType='stacked'

stackType='percent'

layout='horizontal'

glowing

Manual installation

Prefer to copy by hand? Open the Code tab on any example above and switch to the file you need — every source file is there, not just the demo. Drop them in your project like this:

• chart-kit.tsx→components/spectrumui/charts/chart-kit.tsx
• bar-chart.tsx→components/spectrumui/charts/bar-chart.tsx

Then install its dependencies: npm i recharts framer-motion

Usage

import { BarChart } from '@/components/spectrumui/charts/bar-chart';

<BarChart data={data} variant="gradient" />