Sparkline Chart

Sparklines are built for small, axis-free trend strips — not a shrunken line chart. Unlike <BeeLineChart />, which usually scales from zero and shows axes, legends, and brush, sparklines pin the Y domain to your data min/max (with a little padding) so variation fills the full height of a short container. Pass rows with a numeric valueDataKey, map series colors through chartConfig, and compose only the pieces you need — typically <Sparkline />, optionally <Fill />, <EndDot />, <ReferenceBand />, or <Tooltip />. Size the chart with className (for example h-16 w-full).

import {
  BeeSparklineChart,
  Sparkline,
  Fill,
  EndDot,
  Tooltip,
} from "@/components/beecharts/charts/sparkline-chart";

const data = [{ value: 12 }, { value: 18 }, { value: 24 }];
 
const chartConfig = {
  trend: {
    label: "Sessions",
    colors: { light: ["#047857"], dark: ["#10b981"] },
  },
} satisfies ChartConfig;
 
<BeeSparklineChart
  data={data}
  valueDataKey="value"
  config={chartConfig}
  backgroundVariant="dots"
  className="h-12 w-40"
>
  <Fill dataKey="trend" />
  <Sparkline dataKey="trend">
    <EndDot variant="colored-border" />
  </Sparkline>
  <Tooltip defaultIndex={data.length - 1} />
</BeeSparklineChart>

Loading State

Background patterns

Pass backgroundVariant on the root (e.g. dots, graph-paper, cross-hatch, bubbles). Or compose <ChartBackground variant="graph-paper" /> inside BeeSparklineChart. Requires @beecharts/background when installing manually.

Area Fill

Glowing Stroke

End Dot + Tooltip

Reference Band

Root container for compact line charts. Renders a hidden Y axis with a data-min / data-max domain (not zero-based). No visible axes — consumers control footprint via className.

Single-series stroke with optional glow, dashed stroke, and terminal <EndDot />.

Gradient area under the stroke (render before <Sparkline /> so the line stays on top).

Configuration slot — renders a <ChartDot /> on the last point only when composed inside <Sparkline />.

Muted horizontal band for targets, SLA ranges, or baselines.

Compact hover readout; cursor line disabled by default for inline charts.