<lm-chart-sparkline> – Sparkline / minidiagram / Sparkline

Om komponenten

Kanonisk navn: <lm-chart-sparkline>
Synonymer: sparkline, minidiagram, trendindikator, mini graph, inline chart
Kategori: data-visualisering
ARIA-mønster: Ikke aktuelt - Statisk datavisualisering med skjult datatabell, ikke en interaktiv ARIA-widget.
Parts: diagram, diagram-visual, linje, siste-punkt, sammendrag, data-tabell
Native-first-vurdering: HTML har ingen innebygd primitiv for en akseløs trendlinje. Komponenten bruker egen, minimal SVG-visualisering, men publiserer en vanlig tabell for semantikk og skjermlesere.
Nettleserstøtte: Ren SVG + CSS - ingen avanserte funksjoner utover det de andre <lm-chart-*>-komponentene allerede bruker. Linjen har alltid én konsekvent farge (currentColor), samme prinsipp som <lm-chart-line> (se dens 'Nettleserstøtte' for begrunnelsen).
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

En svært kompakt, akseløs trendlinje uten rutenett, verdietiketter eller legende - kun selve kurven og en markør på siste (nåværende) punkt. Ment å stå tett ved siden av (eller rett under) et enkelttall, f.eks. en <lm-stat>, for å gi rask visuell retningskontekst ('går dette opp eller ned?') uten å ta stor plass. Inspirert av OpenBridge (openbridge-storybook.web.app) sin 'Graph Mini'.

Merk: Ikke en erstatning for <lm-chart-line> - se 'egnerSegIkkeFor' under. De to komponentene deler ikke kode utover den felles chart-delt.css-infrastrukturen, siden sparklinens drastisk forenklede visning (ingen akse/rutenett/etiketter) gjør en felles abstraksjon mer komplisert enn å holde dem separate.

Egner seg for

Å gi rask visuell trendkontekst ved siden av et nøkkeltall (f.eks. formuesutvikling siste 12 måneder, ved siden av selve saldoen).
Kompakte oversikter/dashbord med mange små trender der et fullt diagram per rad ville tatt for mye plass.

Egner seg ikke for

Når trenden selv er hovedinnholdet og fortjener nøyaktig avlesning - bruk <lm-chart-line>, som har rutenett, Y-akse-tallmerking og synlige punktetiketter.
Flere serier i samme visualisering - komponenten tegner kun én linje.

Bruk

<script type="module" src="/designsystem/komponenter/data-visualisering/chart-sparkline/chart-sparkline.js"></script>

<lm-chart-sparkline tittel="Formuesutvikling siste 6 måneder"></lm-chart-sparkline>

const sparkline = document.querySelector("lm-chart-sparkline");
sparkline.data = [
    {label: "Jan", value: 120000},
    {label: "Feb", value: 121500},
    {label: "Mar", value: 119800},
    {label: "Apr", value: 124300},
];
sparkline.formatVerdi = (value) => `${value.toLocaleString("nb-NO")} kr`;

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`data`	`Array<{label: string, value: number}>`	[]	Property. Dataserie brukt til trendlinjen og skjult datatabell.
`tittel`	`string`	""	Attributt/property. Tekst brukt som `<caption>` i den skjulte datatabellen.
`formatVerdi`	`(value: number) => string`	String(value)	Property. Formatterer verdien i sluttpunktets native `<title>`-tooltip og i datatabellen.

Parts

Part	Beskrivelse
`diagram`	Ytterrammen rundt diagram og tabell.
`diagram-visual`	Selve SVG-visualiseringen.
`linje`	SVG-`<path>`-en for selve trendlinjen.
`siste-punkt`	Markøren på siste (nåværende) datapunkt.
`sammendrag`	Visuelt skjult, men skjermleser-tilgjengelig tekstsammendrag.
`data-tabell`	Skjult datatabell for tilgjengelighet.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-chart-sparkline::part(diagram) {
    /* egne stiler for "Ytterrammen rundt diagram og tabell." */
}

lm-chart-sparkline::part(diagram-visual) {
    /* egne stiler for "Selve SVG-visualiseringen." */
}

lm-chart-sparkline::part(linje) {
    /* egne stiler for "SVG-`<path>`-en for selve trendlinjen." */
}

lm-chart-sparkline::part(siste-punkt) {
    /* egne stiler for "Markøren på siste (nåværende) datapunkt." */
}

lm-chart-sparkline::part(sammendrag) {
    /* egne stiler for "Visuelt skjult, men skjermleser-tilgjengelig tekstsammendrag." */
}

lm-chart-sparkline::part(data-tabell) {
    /* egne stiler for "Skjult datatabell for tilgjengelighet." */
}

Tilgjengelighet

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en. Tekstsammendraget (høyeste/laveste punkt) er - i motsetning til <lm-chart-line>/<lm-chart-bar>/<lm-chart-area> - visuelt skjult (samme klippe-teknikk som selve datatabellen) i stedet for synlig for alle: sparklinen er bevisst designet som en liten, dekorativ følgesvenn til et enkelttall som allerede vises synlig et annet sted (f.eks. i en <lm-stat>), så et fullt tekstavsnitt her ville visuelt dominere en komponent ment å være ubetydelig i størrelse. Eksakte tall er uansett tilgjengelige for alle brukere via den skjulte datatabellen (skjermlesere) og callout-tooltippen på siste punkt (musbrukere). forced-colors: active bruker systemfarger; ingen bevegelse/animasjon er lagt til i utgangspunktet, så prefers-reduced-motion er ikke relevant her.

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en.
Tekstsammendraget er visuelt skjult (bevisst, se tilgjengelighet), men fortsatt til stede i DOM-en for skjermlesere.
Eksakte tall er tilgjengelige for alle via den skjulte datatabellen og tooltippen på siste punkt.
forced-colors: active bruker systemfarger.

Referanser

Se også:

../chart-line/index.html - det fullverdige linjediagrammet med rutenett, Y-akse-tallmerking og synlige punktetiketter - bruk denne når trenden selv er hovedinnholdet.

Brukes av:

Ingen ennå - ny komponent.

Avhengigheter: designsystem/funksjoner/sikkerhet/escape-html/, designsystem/funksjoner/statistikk/finn-ytterpunkter/