Sparkline

Use Sparkline

A compact line or area chart for trends in a table cell, list or metric.

"use client";

import { FloodRoot, Sparkline } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Sparkline label="Revenue rose from $8,000 to $12,000" values={[8000, 8200, null, 9500, 11000, 12000]} domain={[0, 15000]} />
    </FloodRoot>
  );
}

Design notes

• Give the graphic a label that communicates the metric and the trend. Set showLabel to make that label visible.
• Use a shared domain for comparing magnitudes across rows. Null and nonfinite samples leave gaps in both the stroke and area.
• The default area uses an accent stroke with a gradient below it. Choose variant line for stroke only and use semantic tones only when the data has a known interpretation.

API reference