MiniArea

A small area chart with gradient fill. Similar to Sparkline but with a filled area effect.

Playground

Props

Midnight

width

200

height

Code

<MiniArea
  data={data}
  theme="midnight"
  width={200}
  height={48}
/>

Usage

The chart automatically fills its container width:

tsx

import { MiniArea } from '@derpdaderp/chartkit';

// Responsive - fills container width automatically
<MiniArea data={data} theme="midnight" />

// Fixed width
<MiniArea data={data} theme="midnight" width={160} height={40} />

Props

Prop	Type	Default	Description
`data*`	`T[] \| number[]`	-	Data array
`dataKey`	`keyof T`	`"value"`	Key for numeric values
`width`	`number`	`auto`	Chart width (auto-fills container if not set)
`height`	`number`	`40`	Chart height
`theme*`	`ThemeName`	-	Theme name
`color`	`string`	-	Override color