SpikeChart

A chart for displaying discrete events or spikes over time, similar to Cloudflare's blocked requests visualization.

Playground

Visualize event spikes with a baseline reference:

Midnight

label

Code

<SpikeChart
  data={data}
  theme="midnight"
  label="Blocked Requests"
/>

tsx

<SpikeChart
  data={eventData}
  dataKey="value"
  timeKey="time"
  theme="midnight"
  width={800}
  height={220}
  label="Blocked Requests"
/>

Prop	Type	Default	Description
`data*`	`T[]`	-	Data array
`dataKey`	`keyof T`	`"value"`	Key for values
`timeKey`	`keyof T`	`"time"`	Key for time axis
`width`	`number`	`600`	Chart width
`height`	`number`	`200`	Chart height
`theme*`	`ThemeName`	-	Theme name
`baselineColor`	`string`	-	Override baseline color
`label`	`string`	`"Allowed Requests"`	Tooltip label