Sparkline

A minimal inline chart for showing trends at a glance. Perfect for dashboards, tables, and anywhere you need to visualize data trends in a compact space.

Playground

Experiment with different props to see how the Sparkline component behaves. Use the theme switcher in the header to see it adapt to different themes.

Props

Midnight

width

200

height

glow

OffOn

fill

OffOn

strokeWidth

1.5

Code

<Sparkline
  data={data}
  theme="midnight"
  width={200}
  height={48}
  strokeWidth={1.5}
/>

Usage

Import the component and pass your data. The chart automatically fills its container width:

tsx

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

const data = [
  { value: 10 },
  { value: 25 },
  { value: 15 },
  { value: 30 },
  { value: 22 },
];

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

// Fixed width
<Sparkline data={data} theme="midnight" width={120} height={32} />

With Plain Numbers

You can also pass an array of plain numbers:

tsx

<Sparkline
  data={[10, 25, 15, 30, 22, 28, 35]}
  theme="midnight"
/>

With Glow Effect

Add a glow effect for a more dramatic visualization:

tsx

<Sparkline
  data={data}
  theme="midnight"
  glow
/>

With Area Fill

Fill the area under the line for a more substantial look:

tsx

<Sparkline
  data={data}
  theme="midnight"
  fill
/>

Custom Color

Override the default theme color:

tsx

<Sparkline
  data={data}
  theme="midnight"
  color="#f472b6"
/>

Props

Prop	Type	Default	Description
`data*`	`T[] \| number[]`	-	Data array - can be objects or plain numbers
`dataKey`	`keyof T`	`"value"`	Key to extract numeric value when data contains objects
`width`	`number`	`auto`	Chart width in pixels (auto-fills container if not set)
`height`	`number`	`32`	Chart height in pixels
`theme*`	`ThemeName`	-	Theme name
`color`	`string`	-	Override line color
`glow`	`boolean`	`false`	Enable glow effect on line
`fill`	`boolean`	`false`	Fill area under the line
`strokeWidth`	`number`	`1.5`	Line stroke width
`className`	`string`	-	Additional CSS class