Composed Chart

Bars, lines, and areas on one plot — mix fills, dashes, and glow per series.

Basic chart

barVariant='hatched'

barVariant='duotone'

lineStroke='animated-dashed'

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

Then install its dependencies: npm i recharts framer-motion

Usage

import { ComposedChart } from '@/components/spectrumui/charts/composed-chart';

<ComposedChart data={data} />