> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Sparkline

> Compact inline chart for showing trends at a glance.

export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
  const hostRef = React.useRef(null);
  const handleRef = React.useRef(null);
  const cardRef = React.useRef(null);
  const containerRef = React.useRef(null);
  const [previewWidth, setPreviewWidth] = React.useState(null);
  const [isDragging, setIsDragging] = React.useState(false);
  const [playgroundHref, setPlaygroundHref] = React.useState(null);
  React.useEffect(function () {
    if (!playground) return;
    var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
    var path = isLocal ? "/playground" : "/docs/playground";
    var url = new URL(path, window.location.href);
    url.hash = "code=" + playground;
    setPlaygroundHref(url.href);
  }, [playground]);
  var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
  React.useEffect(function () {
    if (cardRef.current) {
      var card = cardRef.current.closest(".group");
      if (card) card.classList.remove("group");
    }
    var host = hostRef.current;
    if (!host || !json) return;
    function mount() {
      if (!window.__prefab || !host) return;
      var dark = document.documentElement.classList.contains("dark");
      handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
        dark: dark
      });
      if (bare && host.shadowRoot) {
        var m = host.shadowRoot.querySelector("[data-prefab-mount]");
        if (m) m.style.background = "transparent";
      }
    }
    if (window.__prefab) {
      mount();
    } else {
      if (!window.__prefabLoading) {
        if (!window.__prefabReady) {
          var s = document.createElement("script");
          s.src = "/renderer.js";
          document.head.appendChild(s);
        }
        window.__prefabLoading = new Promise(function (resolve) {
          function check() {
            if (window.__prefabReady) {
              window.__prefabReady.then(resolve);
            } else {
              setTimeout(check, 10);
            }
          }
          check();
        });
      }
      window.__prefabLoading.then(mount);
    }
    var observer = new MutationObserver(function () {
      var dark = document.documentElement.classList.contains("dark");
      if (handleRef.current) handleRef.current.setDark(dark);
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"]
    });
    return function () {
      observer.disconnect();
      if (handleRef.current) {
        handleRef.current.unmount();
        handleRef.current = null;
      }
    };
  }, [json]);
  function startResize(e) {
    e.preventDefault();
    var startX = e.clientX;
    var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
    var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
    setIsDragging(true);
    function onMove(ev) {
      var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
      setPreviewWidth(w);
    }
    function onUp() {
      document.removeEventListener("mousemove", onMove);
      document.removeEventListener("mouseup", onUp);
      setIsDragging(false);
    }
    document.addEventListener("mousemove", onMove);
    document.addEventListener("mouseup", onUp);
  }
  if (bare) {
    return <div ref={hostRef} />;
  }
  if (resizable) {
    return <Card>
        <div ref={cardRef} />
        <div ref={containerRef} style={{
      display: "flex",
      position: "relative",
      overflow: "hidden"
    }}>
          <div ref={hostRef} style={{
      flex: previewWidth ? "none" : 1,
      width: previewWidth ? previewWidth + "px" : undefined,
      minWidth: 0
    }} />
          <div onMouseDown={startResize} style={{
      width: "14px",
      flexShrink: 0,
      cursor: "col-resize",
      background: isDragging ? "var(--border, #e5e7eb)" : "color-mix(in srgb, var(--border, #e5e7eb) 40%, transparent)",
      display: "flex",
      alignItems: "center",
      justifyContent: "center",
      transition: "background 0.15s",
      userSelect: "none"
    }}>
            <svg width="6" height="24" style={{
      opacity: 0.5
    }}>
              <circle cx="2" cy="4" r="1.2" fill="currentColor" />
              <circle cx="2" cy="9" r="1.2" fill="currentColor" />
              <circle cx="2" cy="14" r="1.2" fill="currentColor" />
              <circle cx="2" cy="19" r="1.2" fill="currentColor" />
              <circle cx="5" cy="4" r="1.2" fill="currentColor" />
              <circle cx="5" cy="9" r="1.2" fill="currentColor" />
              <circle cx="5" cy="14" r="1.2" fill="currentColor" />
              <circle cx="5" cy="19" r="1.2" fill="currentColor" />
            </svg>
          </div>
          <div style={{
      flex: previewWidth ? 1 : "0 0 24px",
      minWidth: "24px",
      background: "repeating-linear-gradient(-45deg, transparent, transparent 3px, var(--border, #e5e7eb) 3px, var(--border, #e5e7eb) 4px)",
      opacity: 0.4
    }} />
          {previewWidth && <div style={{
      position: "absolute",
      bottom: "8px",
      right: "8px",
      background: "var(--background, white)",
      border: "1px solid var(--border, #e5e7eb)",
      borderRadius: "4px",
      padding: "1px 6px",
      fontSize: "11px",
      fontFamily: "monospace",
      color: "var(--muted-foreground, #6b7280)",
      pointerEvents: "none"
    }}>
              {previewWidth}px
            </div>}
        </div>
        {playgroundHref && <div style={{
      display: "flex",
      justifyContent: "flex-end",
      padding: "4px 0 8px"
    }}>
            <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
      fontSize: "11px",
      opacity: 0.4,
      textDecoration: "none",
      textDecorationLine: "none",
      borderBottom: "none",
      boxShadow: "none",
      display: "inline-flex",
      alignItems: "center",
      gap: "3px",
      transition: "opacity 0.15s",
      fontWeight: 400
    }} onMouseOver={function (e) {
      e.currentTarget.style.opacity = "0.6";
    }} onMouseOut={function (e) {
      e.currentTarget.style.opacity = "0.4";
    }}>
              Edit in Playground
              <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
            </a>
          </div>}
        <div style={{
      marginBottom: "-2rem"
    }}>{children}</div>
      </Card>;
  }
  return <Card>
      <div ref={cardRef} />
      <div ref={hostRef} />
      {playgroundHref && <div style={{
    display: "flex",
    justifyContent: "flex-end",
    padding: "4px 0 8px"
  }}>
          <a href={playgroundHref} target="_blank" rel="noopener noreferrer" style={{
    fontSize: "11px",
    opacity: 0.4,
    textDecoration: "none",
    textDecorationLine: "none",
    borderBottom: "none",
    boxShadow: "none",
    display: "inline-flex",
    alignItems: "center",
    gap: "3px",
    transition: "opacity 0.15s",
    fontWeight: 400
  }} onMouseOver={function (e) {
    e.currentTarget.style.opacity = "0.6";
  }} onMouseOut={function (e) {
    e.currentTarget.style.opacity = "0.4";
  }}>
            Edit in Playground
            <svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M15 3h6v6" /><path d="M10 14 21 3" /><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" /></svg>
          </a>
        </div>}
      <div style={{
    marginBottom: "-2rem"
  }}>{children}</div>
    </Card>;
};

Sparklines are tiny charts designed to sit inline next to text. They communicate trend and shape rather than precise values — no axes, no labels, no tooltips. Pass a flat list of numbers and Sparkline auto-scales the Y axis to fit.

## Basic Usage

<ComponentPreview json={{"view":{"cssClass":"w-48","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"fill":false,"curve":"linear","strokeWidth":1.5}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFNwYXJrbGluZQoKU3BhcmtsaW5lKGRhdGE9WzEwLCAxNSwgOCwgMjIsIDE4LCAyNSwgMjAsIDE2LCAyNCwgMTJdLCBjc3NfY2xhc3M9InctNDgiKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components.charts import Sparkline

    Sparkline(data=[10, 15, 8, 22, 18, 25, 20, 16, 24, 12], css_class="w-48")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "w-48",
        "type": "Sparkline",
        "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
        "fill": false,
        "curve": "linear",
        "strokeWidth": 1.5
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Variants

Semantic variants color the line to match the rest of your UI. These are the same six variants used by Progress, Slider, and Ring.

<ComponentPreview json={{"view":{"cssClass":"gap-3 w-fit mx-auto","type":"Column","children":[{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"fill":false,"curve":"linear","strokeWidth":1.5},{"content":"default","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"success","fill":false,"curve":"linear","strokeWidth":1.5},{"content":"success","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"warning","fill":false,"curve":"linear","strokeWidth":1.5},{"content":"warning","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"destructive","fill":false,"curve":"linear","strokeWidth":1.5},{"content":"destructive","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"info","fill":false,"curve":"linear","strokeWidth":1.5},{"content":"info","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"muted","fill":false,"curve":"linear","strokeWidth":1.5},{"content":"muted","type":"Text"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUm93LCBUZXh0LCBDb2x1bW4KZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFNwYXJrbGluZQoKZGF0YSA9IFsxMCwgMTUsIDgsIDIyLCAxOCwgMjUsIDIwLCAxNiwgMjQsIDEyXQoKd2l0aCBDb2x1bW4oZ2FwPTMsIGNzc19jbGFzcz0idy1maXQgbXgtYXV0byIpOgogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCBjc3NfY2xhc3M9InctMjQiKQogICAgICAgIFRleHQoImRlZmF1bHQiKQogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCB2YXJpYW50PSJzdWNjZXNzIiwgY3NzX2NsYXNzPSJ3LTI0IikKICAgICAgICBUZXh0KCJzdWNjZXNzIikKICAgIHdpdGggUm93KGNzc19jbGFzcz0iaXRlbXMtY2VudGVyIGdhcC0zIik6CiAgICAgICAgU3BhcmtsaW5lKGRhdGE9ZGF0YSwgdmFyaWFudD0id2FybmluZyIsIGNzc19jbGFzcz0idy0yNCIpCiAgICAgICAgVGV4dCgid2FybmluZyIpCiAgICB3aXRoIFJvdyhjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciBnYXAtMyIpOgogICAgICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIHZhcmlhbnQ9ImRlc3RydWN0aXZlIiwgY3NzX2NsYXNzPSJ3LTI0IikKICAgICAgICBUZXh0KCJkZXN0cnVjdGl2ZSIpCiAgICB3aXRoIFJvdyhjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciBnYXAtMyIpOgogICAgICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIHZhcmlhbnQ9ImluZm8iLCBjc3NfY2xhc3M9InctMjQiKQogICAgICAgIFRleHQoImluZm8iKQogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCB2YXJpYW50PSJtdXRlZCIsIGNzc19jbGFzcz0idy0yNCIpCiAgICAgICAgVGV4dCgibXV0ZWQiKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Row, Text, Column
    from prefab_ui.components.charts import Sparkline

    data = [10, 15, 8, 22, 18, 25, 20, 16, 24, 12]

    with Column(gap=3, css_class="w-fit mx-auto"):
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, css_class="w-24")
            Text("default")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, variant="success", css_class="w-24")
            Text("success")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, variant="warning", css_class="w-24")
            Text("warning")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, variant="destructive", css_class="w-24")
            Text("destructive")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, variant="info", css_class="w-24")
            Text("info")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, variant="muted", css_class="w-24")
            Text("muted")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-3 w-fit mx-auto",
        "type": "Column",
        "children": [
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "default", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "variant": "success",
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "success", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "variant": "warning",
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "warning", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "variant": "destructive",
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "destructive", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "variant": "info",
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "info", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "variant": "muted",
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "muted", "type": "Text"}
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Area Fill

Set `fill=True` to shade the area under the line. The fill color inherits from the variant with a gradient that fades to transparent.

<ComponentPreview json={{"view":{"cssClass":"gap-6","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"fill":true,"curve":"linear","strokeWidth":1.5},{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"success","fill":true,"curve":"linear","strokeWidth":1.5},{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"variant":"info","fill":true,"curve":"linear","strokeWidth":1.5}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUm93CmZyb20gcHJlZmFiX3VpLmNvbXBvbmVudHMuY2hhcnRzIGltcG9ydCBTcGFya2xpbmUKCmRhdGEgPSBbMTAsIDE1LCA4LCAyMiwgMTgsIDI1LCAyMCwgMTYsIDI0LCAxMl0KCndpdGggUm93KGNzc19jbGFzcz0iZ2FwLTYiKToKICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGZpbGw9VHJ1ZSwgY3NzX2NsYXNzPSJ3LTI0IikKICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGZpbGw9VHJ1ZSwgdmFyaWFudD0ic3VjY2VzcyIsIGNzc19jbGFzcz0idy0yNCIpCiAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCBmaWxsPVRydWUsIHZhcmlhbnQ9ImluZm8iLCBjc3NfY2xhc3M9InctMjQiKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Row
    from prefab_ui.components.charts import Sparkline

    data = [10, 15, 8, 22, 18, 25, 20, 16, 24, 12]

    with Row(css_class="gap-6"):
        Sparkline(data=data, fill=True, css_class="w-24")
        Sparkline(data=data, fill=True, variant="success", css_class="w-24")
        Sparkline(data=data, fill=True, variant="info", css_class="w-24")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-6",
        "type": "Row",
        "children": [
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "fill": true,
            "curve": "linear",
            "strokeWidth": 1.5
          },
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "variant": "success",
            "fill": true,
            "curve": "linear",
            "strokeWidth": 1.5
          },
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "variant": "info",
            "fill": true,
            "curve": "linear",
            "strokeWidth": 1.5
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Step Curve

Set `curve="step"` to connect points with discrete jumps instead of straight lines.

<ComponentPreview json={{"view":{"cssClass":"gap-3 w-fit mx-auto","type":"Column","children":[{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"fill":false,"curve":"linear","strokeWidth":1.5},{"content":"linear","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"fill":false,"curve":"step","strokeWidth":1.5},{"content":"step","type":"Text"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUm93LCBUZXh0LCBDb2x1bW4KZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFNwYXJrbGluZQoKZGF0YSA9IFsxMCwgMTUsIDgsIDIyLCAxOCwgMjUsIDIwLCAxNiwgMjQsIDEyXQoKd2l0aCBDb2x1bW4oZ2FwPTMsIGNzc19jbGFzcz0idy1maXQgbXgtYXV0byIpOgogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCBjc3NfY2xhc3M9InctMjQiKQogICAgICAgIFRleHQoImxpbmVhciIpCiAgICB3aXRoIFJvdyhjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciBnYXAtMyIpOgogICAgICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGN1cnZlPSJzdGVwIiwgY3NzX2NsYXNzPSJ3LTI0IikKICAgICAgICBUZXh0KCJzdGVwIikK">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Row, Text, Column
    from prefab_ui.components.charts import Sparkline

    data = [10, 15, 8, 22, 18, 25, 20, 16, 24, 12]

    with Column(gap=3, css_class="w-fit mx-auto"):
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, css_class="w-24")
            Text("linear")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, curve="step", css_class="w-24")
            Text("step")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-3 w-fit mx-auto",
        "type": "Column",
        "children": [
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "linear", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "fill": false,
                "curve": "step",
                "strokeWidth": 1.5
              },
              {"content": "step", "type": "Text"}
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Custom Colors

Use `indicator_class` for colors beyond the built-in variants. Since the sparkline line is an SVG stroke, use `stroke-*` classes.

<ComponentPreview json={{"view":{"cssClass":"gap-6","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"indicatorClass":"stroke-blue-500","fill":false,"curve":"linear","strokeWidth":1.5},{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"indicatorClass":"stroke-emerald-500","fill":false,"curve":"linear","strokeWidth":1.5},{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"indicatorClass":"stroke-orange-500","fill":false,"curve":"linear","strokeWidth":1.5}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUm93CmZyb20gcHJlZmFiX3VpLmNvbXBvbmVudHMuY2hhcnRzIGltcG9ydCBTcGFya2xpbmUKCmRhdGEgPSBbMTAsIDE1LCA4LCAyMiwgMTgsIDI1LCAyMCwgMTYsIDI0LCAxMl0KCndpdGggUm93KGNzc19jbGFzcz0iZ2FwLTYiKToKICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGluZGljYXRvcl9jbGFzcz0ic3Ryb2tlLWJsdWUtNTAwIiwgY3NzX2NsYXNzPSJ3LTI0IikKICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGluZGljYXRvcl9jbGFzcz0ic3Ryb2tlLWVtZXJhbGQtNTAwIiwgY3NzX2NsYXNzPSJ3LTI0IikKICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGluZGljYXRvcl9jbGFzcz0ic3Ryb2tlLW9yYW5nZS01MDAiLCBjc3NfY2xhc3M9InctMjQiKQo">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Row
    from prefab_ui.components.charts import Sparkline

    data = [10, 15, 8, 22, 18, 25, 20, 16, 24, 12]

    with Row(css_class="gap-6"):
        Sparkline(data=data, indicator_class="stroke-blue-500", css_class="w-24")
        Sparkline(data=data, indicator_class="stroke-emerald-500", css_class="w-24")
        Sparkline(data=data, indicator_class="stroke-orange-500", css_class="w-24")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-6",
        "type": "Row",
        "children": [
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "indicatorClass": "stroke-blue-500",
            "fill": false,
            "curve": "linear",
            "strokeWidth": 1.5
          },
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "indicatorClass": "stroke-emerald-500",
            "fill": false,
            "curve": "linear",
            "strokeWidth": 1.5
          },
          {
            "cssClass": "w-24",
            "type": "Sparkline",
            "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
            "indicatorClass": "stroke-orange-500",
            "fill": false,
            "curve": "linear",
            "strokeWidth": 1.5
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## Size and Stroke

Control dimensions with `height` and `css_class` for width. Use `stroke_width` to adjust line thickness.

<ComponentPreview json={{"view":{"cssClass":"gap-3 w-fit mx-auto","type":"Column","children":[{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-16","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"height":16,"fill":false,"curve":"linear","strokeWidth":1.0},{"content":"compact","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-24","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"height":24,"fill":false,"curve":"linear","strokeWidth":1.5},{"content":"default","type":"Text"}]},{"cssClass":"items-center gap-3","type":"Row","children":[{"cssClass":"w-32","type":"Sparkline","data":[10,15,8,22,18,25,20,16,24,12],"height":40,"fill":false,"curve":"linear","strokeWidth":2.5},{"content":"large","type":"Text"}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgUm93LCBUZXh0LCBDb2x1bW4KZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFNwYXJrbGluZQoKZGF0YSA9IFsxMCwgMTUsIDgsIDIyLCAxOCwgMjUsIDIwLCAxNiwgMjQsIDEyXQoKd2l0aCBDb2x1bW4oZ2FwPTMsIGNzc19jbGFzcz0idy1maXQgbXgtYXV0byIpOgogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCBoZWlnaHQ9MTYsIHN0cm9rZV93aWR0aD0xLCBjc3NfY2xhc3M9InctMTYiKQogICAgICAgIFRleHQoImNvbXBhY3QiKQogICAgd2l0aCBSb3coY3NzX2NsYXNzPSJpdGVtcy1jZW50ZXIgZ2FwLTMiKToKICAgICAgICBTcGFya2xpbmUoZGF0YT1kYXRhLCBoZWlnaHQ9MjQsIGNzc19jbGFzcz0idy0yNCIpCiAgICAgICAgVGV4dCgiZGVmYXVsdCIpCiAgICB3aXRoIFJvdyhjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciBnYXAtMyIpOgogICAgICAgIFNwYXJrbGluZShkYXRhPWRhdGEsIGhlaWdodD00MCwgc3Ryb2tlX3dpZHRoPTIuNSwgY3NzX2NsYXNzPSJ3LTMyIikKICAgICAgICBUZXh0KCJsYXJnZSIpCg">
  <CodeGroup>
    ```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import Row, Text, Column
    from prefab_ui.components.charts import Sparkline

    data = [10, 15, 8, 22, 18, 25, 20, 16, 24, 12]

    with Column(gap=3, css_class="w-fit mx-auto"):
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, height=16, stroke_width=1, css_class="w-16")
            Text("compact")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, height=24, css_class="w-24")
            Text("default")
        with Row(css_class="items-center gap-3"):
            Sparkline(data=data, height=40, stroke_width=2.5, css_class="w-32")
            Text("large")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "cssClass": "gap-3 w-fit mx-auto",
        "type": "Column",
        "children": [
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-16",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "height": 16,
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.0
              },
              {"content": "compact", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-24",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "height": 24,
                "fill": false,
                "curve": "linear",
                "strokeWidth": 1.5
              },
              {"content": "default", "type": "Text"}
            ]
          },
          {
            "cssClass": "items-center gap-3",
            "type": "Row",
            "children": [
              {
                "cssClass": "w-32",
                "type": "Sparkline",
                "data": [10, 15, 8, 22, 18, 25, 20, 16, 24, 12],
                "height": 40,
                "fill": false,
                "curve": "linear",
                "strokeWidth": 2.5
              },
              {"content": "large", "type": "Text"}
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## In a Table

Sparklines sit naturally in table cells. Use `Table` (not `DataTable`) since sparklines are components, not plain values.

<ComponentPreview json={{"view":{"type":"Table","children":[{"type":"TableHeader","children":[{"type":"TableRow","children":[{"type":"TableHead","content":"Metric"},{"type":"TableHead","content":"Trend"},{"type":"TableHead","content":"Current"}]}]},{"type":"TableBody","children":[{"type":"TableRow","children":[{"type":"TableCell","content":"Revenue"},{"type":"TableCell","children":[{"cssClass":"w-24","type":"Sparkline","data":[45,52,49,60,55,72,68,75],"variant":"success","fill":true,"curve":"smooth","strokeWidth":1.5}]},{"type":"TableCell","content":"$75K"}]},{"type":"TableRow","children":[{"type":"TableCell","content":"Churn"},{"type":"TableCell","children":[{"cssClass":"w-24","type":"Sparkline","data":[12,15,18,14,20,22,19,25],"variant":"destructive","fill":false,"curve":"smooth","strokeWidth":1.5}]},{"type":"TableCell","content":"2.5%"}]},{"type":"TableRow","children":[{"type":"TableCell","content":"Users"},{"type":"TableCell","children":[{"cssClass":"w-24","type":"Sparkline","data":[200,220,215,240,260,255,270,290],"variant":"info","fill":true,"curve":"smooth","strokeWidth":1.5}]},{"type":"TableCell","content":"290"}]}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgKAogICAgVGFibGUsIFRhYmxlSGVhZGVyLCBUYWJsZUJvZHksIFRhYmxlUm93LAogICAgVGFibGVIZWFkLCBUYWJsZUNlbGwsIFRleHQsCikKZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cy5jaGFydHMgaW1wb3J0IFNwYXJrbGluZQoKd2l0aCBUYWJsZSgpOgogICAgd2l0aCBUYWJsZUhlYWRlcigpOgogICAgICAgIHdpdGggVGFibGVSb3coKToKICAgICAgICAgICAgVGFibGVIZWFkKCJNZXRyaWMiKQogICAgICAgICAgICBUYWJsZUhlYWQoIlRyZW5kIikKICAgICAgICAgICAgVGFibGVIZWFkKCJDdXJyZW50IikKICAgIHdpdGggVGFibGVCb2R5KCk6CiAgICAgICAgd2l0aCBUYWJsZVJvdygpOgogICAgICAgICAgICBUYWJsZUNlbGwoIlJldmVudWUiKQogICAgICAgICAgICB3aXRoIFRhYmxlQ2VsbCgpOgogICAgICAgICAgICAgICAgU3BhcmtsaW5lKAogICAgICAgICAgICAgICAgICAgIGRhdGE9WzQ1LCA1MiwgNDksIDYwLCA1NSwgNzIsIDY4LCA3NV0sCiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD0ic3VjY2VzcyIsIGZpbGw9VHJ1ZSwgY3VydmU9InNtb290aCIsCiAgICAgICAgICAgICAgICAgICAgY3NzX2NsYXNzPSJ3LTI0IiwKICAgICAgICAgICAgICAgICkKICAgICAgICAgICAgVGFibGVDZWxsKCIkNzVLIikKICAgICAgICB3aXRoIFRhYmxlUm93KCk6CiAgICAgICAgICAgIFRhYmxlQ2VsbCgiQ2h1cm4iKQogICAgICAgICAgICB3aXRoIFRhYmxlQ2VsbCgpOgogICAgICAgICAgICAgICAgU3BhcmtsaW5lKAogICAgICAgICAgICAgICAgICAgIGRhdGE9WzEyLCAxNSwgMTgsIDE0LCAyMCwgMjIsIDE5LCAyNV0sCiAgICAgICAgICAgICAgICAgICAgdmFyaWFudD0iZGVzdHJ1Y3RpdmUiLCBjdXJ2ZT0ic21vb3RoIiwKICAgICAgICAgICAgICAgICAgICBjc3NfY2xhc3M9InctMjQiLAogICAgICAgICAgICAgICAgKQogICAgICAgICAgICBUYWJsZUNlbGwoIjIuNSUiKQogICAgICAgIHdpdGggVGFibGVSb3coKToKICAgICAgICAgICAgVGFibGVDZWxsKCJVc2VycyIpCiAgICAgICAgICAgIHdpdGggVGFibGVDZWxsKCk6CiAgICAgICAgICAgICAgICBTcGFya2xpbmUoCiAgICAgICAgICAgICAgICAgICAgZGF0YT1bMjAwLCAyMjAsIDIxNSwgMjQwLCAyNjAsIDI1NSwgMjcwLCAyOTBdLAogICAgICAgICAgICAgICAgICAgIHZhcmlhbnQ9ImluZm8iLCBmaWxsPVRydWUsIGN1cnZlPSJzbW9vdGgiLAogICAgICAgICAgICAgICAgICAgIGNzc19jbGFzcz0idy0yNCIsCiAgICAgICAgICAgICAgICApCiAgICAgICAgICAgIFRhYmxlQ2VsbCgiMjkwIikK">
  <CodeGroup>
    ```python Python expandable icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    from prefab_ui.components import (
        Table, TableHeader, TableBody, TableRow,
        TableHead, TableCell, Text,
    )
    from prefab_ui.components.charts import Sparkline

    with Table():
        with TableHeader():
            with TableRow():
                TableHead("Metric")
                TableHead("Trend")
                TableHead("Current")
        with TableBody():
            with TableRow():
                TableCell("Revenue")
                with TableCell():
                    Sparkline(
                        data=[45, 52, 49, 60, 55, 72, 68, 75],
                        variant="success", fill=True, curve="smooth",
                        css_class="w-24",
                    )
                TableCell("$75K")
            with TableRow():
                TableCell("Churn")
                with TableCell():
                    Sparkline(
                        data=[12, 15, 18, 14, 20, 22, 19, 25],
                        variant="destructive", curve="smooth",
                        css_class="w-24",
                    )
                TableCell("2.5%")
            with TableRow():
                TableCell("Users")
                with TableCell():
                    Sparkline(
                        data=[200, 220, 215, 240, 260, 255, 270, 290],
                        variant="info", fill=True, curve="smooth",
                        css_class="w-24",
                    )
                TableCell("290")
    ```

    ```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
    {
      "view": {
        "type": "Table",
        "children": [
          {
            "type": "TableHeader",
            "children": [
              {
                "type": "TableRow",
                "children": [
                  {"type": "TableHead", "content": "Metric"},
                  {"type": "TableHead", "content": "Trend"},
                  {"type": "TableHead", "content": "Current"}
                ]
              }
            ]
          },
          {
            "type": "TableBody",
            "children": [
              {
                "type": "TableRow",
                "children": [
                  {"type": "TableCell", "content": "Revenue"},
                  {
                    "type": "TableCell",
                    "children": [
                      {
                        "cssClass": "w-24",
                        "type": "Sparkline",
                        "data": [45, 52, 49, 60, 55, 72, 68, 75],
                        "variant": "success",
                        "fill": true,
                        "curve": "smooth",
                        "strokeWidth": 1.5
                      }
                    ]
                  },
                  {"type": "TableCell", "content": "$75K"}
                ]
              },
              {
                "type": "TableRow",
                "children": [
                  {"type": "TableCell", "content": "Churn"},
                  {
                    "type": "TableCell",
                    "children": [
                      {
                        "cssClass": "w-24",
                        "type": "Sparkline",
                        "data": [12, 15, 18, 14, 20, 22, 19, 25],
                        "variant": "destructive",
                        "fill": false,
                        "curve": "smooth",
                        "strokeWidth": 1.5
                      }
                    ]
                  },
                  {"type": "TableCell", "content": "2.5%"}
                ]
              },
              {
                "type": "TableRow",
                "children": [
                  {"type": "TableCell", "content": "Users"},
                  {
                    "type": "TableCell",
                    "children": [
                      {
                        "cssClass": "w-24",
                        "type": "Sparkline",
                        "data": [200, 220, 215, 240, 260, 255, 270, 290],
                        "variant": "info",
                        "fill": true,
                        "curve": "smooth",
                        "strokeWidth": 1.5
                      }
                    ]
                  },
                  {"type": "TableCell", "content": "290"}
                ]
              }
            ]
          }
        ]
      }
    }
    ```
  </CodeGroup>
</ComponentPreview>

## API Reference

<Card icon="code" title="Sparkline Parameters">
  <ParamField body="data" type="list[int | float] | str" required>
    Flat list of numeric values, or a `{{ field }}` interpolation reference.
  </ParamField>

  <ParamField body="height" type="int" default="24">
    Chart height in pixels.
  </ParamField>

  <ParamField body="variant" type="str" default="default">
    Visual variant: `"default"`, `"success"`, `"warning"`, `"destructive"`, `"info"`, `"muted"`.
  </ParamField>

  <ParamField body="indicator_class" type="str | None" default="None">
    Tailwind classes for the line/fill. Use `stroke-*` classes for color overrides.
  </ParamField>

  <ParamField body="fill" type="bool" default="False">
    Show a gradient area fill under the line.
  </ParamField>

  <ParamField body="curve" type="Literal[&#x22;linear&#x22;, &#x22;step&#x22;]" default="&#x22;linear&#x22;">
    Line interpolation style between data points.
  </ParamField>

  <ParamField body="stroke_width" type="float" default="1.5">
    Line thickness in pixels.
  </ParamField>

  <ParamField body="mode" type="Literal[&#x22;line&#x22;, &#x22;bar&#x22;]" default="&#x22;line&#x22;">
    Chart mode: `"line"` draws a polyline, `"bar"` draws vertical bars.
  </ParamField>

  <ParamField body="css_class" type="str | None" default="None">
    Tailwind classes for the outer container. Use `w-*` classes to control width.
  </ParamField>
</Card>

## Protocol Reference

```json Sparkline theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
  "type": "Sparkline",
  "id?": "string",
  "onMount?": "any",
  "data": "number[] | string (required)",
  "height?": "number",
  "variant?": "default | success | warning | destructive | info | muted | string",
  "indicatorClass?": "string",
  "fill?": false,
  "curve?": "linear | smooth | step",
  "strokeWidth?": "1.5",
  "mode?": "line | bar",
  "cssClass?": "string"
}
```

For the complete protocol schema, see [Sparkline](/protocol/sparkline).