Sparklines beside the text

import { createSparkline, type Sparkline, type SparklineOptions } from "@ortex-charts/lite";

// Sized to the line of type it sits in: about the height of a lower-case
// letter, no padding, no endpoint dot, colored by the overall direction.
const inline: Partial<SparklineOptions> = { width: 62, height: 15, padding: 1, endpoint: false, lineWidth: 1.25 };

const sparks: Sparkline[] = [
    createSparkline(slots[0], { ...inline, kind: "line", colorByTrend: true }).setData(values),
    createSparkline(slots[1], { ...inline, kind: "column", baseline: 0 }).setData(returns),
    createSparkline(slots[2], { ...inline, kind: "winloss" }).setData(returns),

    // The fourth kind, and the same data again, at card size.
    createSparkline(slots[3], { kind: "area", height: 34, colorByTrend: true, extremes: true }).setData(values),
    createSparkline(slots[4], { kind: "column", height: 34, baseline: 0 }).setData(returns),
    createSparkline(slots[5], { kind: "winloss", height: 34 }).setData(returns),
];