Sparkline
DataMITCompact inline trend chart for embedding in stat cards and tables.
bun add @otfdashkit/ui
Preview
SparklineData
Loading Storybook preview…
Code
@otfdashkit/uiimport { Sparkline } from '@otfdashkit/ui'
const SPARK_DATA = [12, 18, 14, 22, 19, 28, 24, 32, 27, 38, 34, 45]
export function Example() {
return (
<div className="flex items-center gap-4 p-4">
<span className="text-sm font-medium">Revenue</span>
<Sparkline data={SPARK_DATA} type="line" width={120} height={36} />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Sparkline source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| datarequired | number[] | ||
| className | string | ||
| color | string | 'hsl(var(--primary))' | |
| height | number | 32 | |
| type | 'line' | 'area' | 'line' | |
| width | number | 100 |