Sparkline

Small inline trend chart.

html

<span class="sparkline sparkline--up" style="--accent:#A8E6C1;--sw:2;" role="img" aria-label="Sparkline, trend: up">
  <svg class="sparkline__svg" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
    <polyline class="sparkline__line sparkline__line--up" points="0,26 15,24 30,20 45,15 60,12 75,8 100,4"></polyline>
    <polyline class="sparkline__line sparkline__line--down" points="0,4 15,8 30,10 45,14 60,18 75,22 100,26"></polyline>
    <polyline class="sparkline__line sparkline__line--flat" points="0,16 15,15 30,17 45,14 60,16 75,15 100,16"></polyline>
    <circle class="sparkline__marker sparkline__marker--up" cx="100" cy="4"></circle>
    <circle class="sparkline__marker sparkline__marker--down" cx="100" cy="26"></circle>
    <circle class="sparkline__marker sparkline__marker--flat" cx="100" cy="16"></circle>
  </svg>
</span>
<style>
.sparkline { display: inline-block; width: 100px; height: 30px; }
.sparkline__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sparkline__line { fill: none; stroke: var(--accent); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; display: none; }
.sparkline--up .sparkline__line--up { display: block; }
.sparkline--down .sparkline__line--down { display: block; }
.sparkline--flat .sparkline__line--flat { display: block; }
.sparkline__marker { fill: var(--accent); stroke: #FAF7F2; stroke-width: 1; r: 2.5; display: none; }
.sparkline--up .sparkline__marker--up { display: block; }
.sparkline--down .sparkline__marker--down { display: block; }
.sparkline--flat .sparkline__marker--flat { display: block; }
</style>

tailwind

<span class="sparkline-tw sparkline-tw--up" style="--accent:#A8E6C1;--sw:2;" role="img" aria-label="Sparkline, trend: up">
  <svg class="sparkline-tw__svg" viewBox="0 0 100 30" xmlns="http://www.w3.org/2000/svg">
    <polyline class="sparkline-tw__line sparkline-tw__line--up" points="0,26 15,24 30,20 45,15 60,12 75,8 100,4"></polyline>
    <polyline class="sparkline-tw__line sparkline-tw__line--down" points="0,4 15,8 30,10 45,14 60,18 75,22 100,26"></polyline>
    <polyline class="sparkline-tw__line sparkline-tw__line--flat" points="0,16 15,15 30,17 45,14 60,16 75,15 100,16"></polyline>
    <circle class="sparkline-tw__marker sparkline-tw__marker--up" cx="100" cy="4"></circle>
    <circle class="sparkline-tw__marker sparkline-tw__marker--down" cx="100" cy="26"></circle>
    <circle class="sparkline-tw__marker sparkline-tw__marker--flat" cx="100" cy="16"></circle>
  </svg>
</span>
<style>
.sparkline-tw { display: inline-block; width: 100px; height: 30px; }
.sparkline-tw__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.sparkline-tw__line { fill: none; stroke: var(--accent); stroke-width: var(--sw); stroke-linecap: round; stroke-linejoin: round; display: none; }
.sparkline-tw--up .sparkline-tw__line--up { display: block; }
.sparkline-tw--down .sparkline-tw__line--down { display: block; }
.sparkline-tw--flat .sparkline-tw__line--flat { display: block; }
.sparkline-tw__marker { fill: var(--accent); stroke: #FAF7F2; stroke-width: 1; r: 2.5; display: none; }
.sparkline-tw--up .sparkline-tw__marker--up { display: block; }
.sparkline-tw--down .sparkline-tw__marker--down { display: block; }
.sparkline-tw--flat .sparkline-tw__marker--flat { display: block; }
</style>

react

export function Sparkline({
  trend = "up",
  showMarker = true,
  strokeWidth = 2,
  accent = "#A8E6C1",
}) {
  const lines = {
    up: "0,26 15,24 30,20 45,15 60,12 75,8 100,4",
    down: "0,4 15,8 30,10 45,14 60,18 75,22 100,26",
    flat: "0,16 15,15 30,17 45,14 60,16 75,15 100,16",
  };
  const ends = { up: [100, 4], down: [100, 26], flat: [100, 16] };
  const [ex, ey] = ends[trend] ?? ends.flat;
  return (
    <span role="img" aria-label={`Sparkline, trend: ${trend}`} style={{ display: "inline-block", width: 100, height: 30 }}>
      <svg viewBox="0 0 100 30" style={{ width: "100%", height: "100%", display: "block", overflow: "visible" }}>
        <polyline points={lines[trend] ?? lines.flat} fill="none" stroke={accent} strokeWidth={strokeWidth} strokeLinecap="round" strokeLinejoin="round" />
        {showMarker && <circle cx={ex} cy={ey} r={2.5} fill={accent} stroke="#FAF7F2" strokeWidth={1} />}
      </svg>
    </span>
  );
}