The Sparkline Widget

The sparkline widget renders compact inline charts perfect for dashboards and status displays. It shows data trends in minimal space, with support for color-coded bars based on thresholds.

APIs

mod sparkline: sig {
    type Direction = [`LeftToRight, `RightToLeft];

    /// Creates a sparkline widget from data values
    val sparkline: fn(
        ?#max: &i64,
        ?#style: &Style,
        ?#direction: &Direction,
        &Array<[SparklineBar, f64]>
    ) -> Widget;

    /// Creates a sparkline bar with custom styling
    val sparkline_bar: fn(?#style: Style, f64) -> SparklineBar;
}

Parameters

sparkline

• max - Maximum value for scaling (auto-scales if not specified)
• style - Default style for bars
• direction - LeftToRight (default) or RightToLeft

sparkline_bar

• style - Style for this specific bar

Examples

Basic Usage

use tui;
use tui::sparkline;

let data = [10.0, 25.0, 40.0, 55.0, 70.0, 85.0, 100.0];

sparkline(#max: &100, &data)

Threshold-based Coloring

use tui;
use tui::sparkline;
use tui::block;
use tui::text;

let data = {
    let clock = time::timer(duration:0.3s, true);
    let v = rand::rand(#clock, #start:0., #end:100.);
    let d = [];
    let color = select v {
        v if v <= 25. => `Green,
        v if v <= 50. => `Yellow,
        _ => `Red
    };
    let v = sparkline_bar(#style: style(#fg: color), v);
    d <- array::window(#n:80, clock ~ d, v);
    d
};

block(
    #border: &`All,
    #title: &line("Network Traffic Rate"),
    &sparkline(
        #style: &style(#fg: `Green),
        #max: &100,
        &data
    )
)

Multi-metric Dashboard

use tui;
use tui::sparkline;
use tui::block;
use tui::text;
use tui::layout;

let cpu_data = [50., 60., 55., 70., 65.];
let mem_data = [30., 35., 40., 38., 42.];
let net_data = [10., 20., 15., 25., 30.];

layout(
    #direction: &`Vertical,
    &[
        child(#constraint: `Percentage(33), block(
            #title: &line("CPU"),
            &sparkline(#style: &style(#fg: `Red), #max: &100, &cpu_data)
        )),
        child(#constraint: `Percentage(33), block(
            #title: &line("Memory"),
            &sparkline(#style: &style(#fg: `Yellow), #max: &100, &mem_data)
        )),
        child(#constraint: `Percentage(33), block(
            #title: &line("Network"),
            &sparkline(#style: &style(#fg: `Cyan), &net_data)
        ))
    ]
)

Sparkline from Netidx

use tui;
use tui::sparkline;

let data: Array<f64> = [];
let new_value = net::subscribe("/local/metrics/cpu")?;

data <- array::window(
    #n: 60,
    new_value ~ data,
    cast<f64>(new_value)?
);

sparkline(#max: &100, &data)

showing the output of the below shell pipeline during a netidx build,

top | \
grep --line-buffered Cpu | \
awk '{ printf("/local/metrics/cpu|f64|%s\n", $6); fflush() }' | \
netidx publisher

Use Cases

Sparklines are ideal for:

• System resource monitoring (CPU, memory, network)
• Real-time metrics dashboards
• Compact data visualization in lists or tables
• Rate of change visualization

See Also

• chart - For detailed charts with axes
• gauge - For single current value display
• linegauge - For horizontal progress bars