Components

Sparkline

An inline SVG mini line chart — no axes, no grid, no library. The line is a single polyline scaled to fit its box and drawn with currentColor, so it picks up the surrounding text color (accent by default). Add a faint area fill or an end-of-line dot.

Basic line

A bare .ds-sparkline wrapping an inline <svg> with a single __line polyline. Sits inline so it flows next to text.

currentColor line

<span class="ds-sparkline">
  <svg class="ds-sparkline__svg" width="120" height="32"
       viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
    <polyline class="ds-sparkline__line"
              points="2,24 25.6,18 49.2,26 72.8,8 96.4,14 118,2" />
  </svg>
</span>

Area fill & end dot

Add a faint __area path under the line and a __dot on the last point. Both inherit the line color.

__area + __dot

<span class="ds-sparkline">
  <svg class="ds-sparkline__svg" width="120" height="32"
       viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
    <path class="ds-sparkline__area"
          d="M2,30 L2,24 25.6,18 49.2,26 72.8,8 96.4,14 118,2 L118,30 Z" />
    <polyline class="ds-sparkline__line"
              points="2,24 25.6,18 49.2,26 72.8,8 96.4,14 118,2" />
    <circle class="ds-sparkline__dot" cx="118" cy="2" r="2" />
  </svg>
</span>

Recolor

Because the line is currentColor, setting color on the wrapper (e.g. a status color) recolors the whole sparkline.

color: var(--ds-success)

<span class="ds-sparkline" style="color: var(--ds-success)">
  <svg class="ds-sparkline__svg" width="120" height="32"
       viewBox="0 0 120 32" preserveAspectRatio="none" aria-hidden="true">
    <polyline class="ds-sparkline__line"
              points="2,28 25.6,22 49.2,24 72.8,14 96.4,10 118,4" />
  </svg>
</span>

React

The <Sparkline> component computes the polyline from data scaled to width/height.

import { Sparkline } from "@diametral/design-system/react";

<Sparkline data={[4, 8, 6, 14, 11, 20]} />
<Sparkline data={[4, 8, 6, 14, 11, 20]} fill showDot />
<Sparkline data={[2, 5, 4, 9, 11, 16]} stroke="var(--ds-success)" width={160} />