Area Chart

Filled areas with gradient, hatch, dotted, stacked, and dashed-stroke variants.

variant='gradient'

variant='hatched'

variant='dotted'

variant='solid'

stackType='stacked'

curveType='bump'

strokeVariant='animated-dashed'

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
• area-chart.tsx→components/spectrumui/charts/area-chart.tsx

Then install its dependencies: npm i recharts framer-motion

Usage

import { AreaChart } from '@/components/spectrumui/charts/area-chart';

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