React Sparklines

@lueton/react-sparklines is a lightweight, composable sparkline charting library for React. It renders inline SVG charts that are fully typed with TypeScript and powered by D3 under the hood.

Features

Composable — Combine <Line />, <Bar />, <Band />, and <ReferenceLine /> inside a single chart
Convenience components — Use <SparklinesLine />, <SparklinesBar />, or <SparklinesBand /> for one-liner charts
Tooltips — Built-in tooltip support with customizable content
Responsive — Charts automatically resize to fit their container
Typed data — Generic <TData> support for typed data objects with dataKey accessors
Lightweight — ~30 kB gzipped, minimal dependencies
Wide React support — Works with React 16.8 through 19

Quick Example

import { SparklinesLine } from "@lueton/react-sparklines";

const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];

export default function App() {
  return <SparklinesLine data={data} />;
}

For composed charts with multiple series:

import { SparklinesComposed, Line, Bar } from "@lueton/react-sparklines";

const data = [1, 5, 3, 8, 4, 7, 2, 8, 3, 4];

export default function App() {
  return (
    <SparklinesComposed data={data}>
      <Bar />
      <Line />
    </SparklinesComposed>
  );
}