@tuicomponents/sparkline

Compact inline sparkline visualization using height block characters (▁▂▃▄▅▆▇█)

Installation

pnpm add @tuicomponents/sparkline

Quick Start

import { createSparkline } from "@tuicomponents/sparkline";
import { createRenderContext } from "@tuicomponents/core";

const component = createSparkline();
const context = createRenderContext();

const result = component.render(
  {
    values: [4, 2, 8, 5, 9, 3, 7, 6, 1, 8],
  },
  context
);
console.log(result.output);

Examples

basic

Simple sparkline with default settings

| ANSI | Markdown | Grayscale | Inline | | --------------------------------------------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------ | | | | | |

{
  "values": [4, 2, 8, 5, 9, 3, 7, 6, 1, 8]
}

cpu-usage

CPU usage monitoring over time

| ANSI | Markdown | Grayscale | Inline | | ------------------------------------------------------- | -------------------------------------------------------------------- | ---------------------------------------------------------------------- | ---------------------------------------------------------------- | | | | | |

{
  "values": [45, 52, 48, 65, 72, 58, 63, 71, 68, 55, 48, 52],
  "min": 0,
  "max": 100
}

with-label

Sparkline with label prefix

| ANSI | Markdown | Grayscale | Inline | | -------------------------------------------------------- | --------------------------------------------------------------------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------- | | | | | |

{
  "values": [2.1, 2.3, 2.8, 3.2, 3.5, 3.1, 2.9, 3.4, 3.8, 4.1],
  "label": "Memory: "
}

stock-trend

Stock price trend

| ANSI | Markdown | Grayscale | Inline | | --------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------ | ------------------------------------------------------------------ | | | | | |

{
  "values": [142, 145, 143, 148, 152, 149, 155, 158, 154, 160, 163, 159]
}

Configuration Options

| Property | Type | Required | Default | Description | | -------- | ---------- | -------- | ------- | ----------- | | values | number[] | ✓ | - | - | | width | number | | - | - | | min | number | | - | - | | max | number | | - | - | | label | string | | - | - | | fit | boolean | | - | - |

Render Modes

The component supports three render modes:

• ANSI: Rich terminal output with colors and Unicode characters
• Markdown: Plain text suitable for AI assistants and documentation
• Grayscale: ANSI output without colors (for terminals that don't support color)

You can specify the render mode when creating the context:

import { createRenderContext } from "@tuicomponents/core";

// ANSI mode (default)
const ansiContext = createRenderContext({ renderMode: "ansi" });

// Markdown mode
const mdContext = createRenderContext({ renderMode: "markdown" });

// Grayscale mode
const grayscaleContext = createRenderContext({ renderMode: "grayscale" });

API

For detailed API documentation, see the API docs.

License

UNLICENSED