Docs/Area Chart

Area Chart

Area charts for visualizing trends over time with filled regions.

Installation

tsx

1import { StormAreaChart } from '@storm-ds/ui/charts'
2
3# Requires recharts peer dependency
4pnpm add recharts

Default

tsx

1import { StormAreaChart } from '@storm-ds/ui/charts'
2
3const data = [
4  { month: 'Jan', revenue: 4000 },
5  { month: 'Feb', revenue: 3000 },
6  ...
7]
8
9<StormAreaChart data={data} categories={['revenue']} index="month" />

Stacked

tsx

1<StormAreaChart
2  data={data}
3  categories={['revenue', 'expenses']}
4  index="month"
5  stacked
6/>

Without Gradient

tsx

1<StormAreaChart
2  data={data}
3  categories={['revenue', 'expenses']}
4  index="month"
5  gradient={false}
6/>

Overview

Bar Chart