sparkline

A small trend line beside a number.

Example

Laravel

<x-admin::sparkline label="Members over 8 weeks" :data="[40, 42, 41, 45, 47, 46, 50, 54]" />

Props

PropRequiredDefaultOptions
data[]
labelyes

Other attributes, such as wire:model or data-*, pass through to the element.

Other stacks

React and Vue: import { Sparkline } from "@admiral/ui-kit/react" (or /vue). See the React and Vue guide.

HTML, for any stack
<svg class="adm-sparkline" viewBox="0 0 120 36" role="img" aria-label="Members over 8 weeks. From 40 to 54">
            <polyline points="5,30 20.71,26.57 36.43,28.29 52.14,21.43 67.86,18 83.57,19.71 99.29,12.86 115,6" fill="none" stroke="var(--ad-chart-brand)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
        <circle cx="115" cy="6" r="4" fill="var(--ad-chart-brand)" stroke="var(--ad-base)" stroke-width="2" />
    </svg>