<lm-chart-scatter> – Punktdiagram / Scatter chart

Om komponenten

Kanonisk navn: <lm-chart-scatter>
Synonymer: punktdiagram, spredningsdiagram, scatter chart, scatter plot, korrelasjon, x/y-diagram
Kategori: data-visualisering
ARIA-mønster: Ikke aktuelt - Statisk datavisualisering med skjult datatabell, ikke en interaktiv ARIA-widget.
Parts: diagram, diagram-visual, data-tabell, akse, etikett, punkt
Native-first-vurdering: HTML har ingen innebygd primitiv for punktdiagram. Komponenten bruker egen SVG-visualisering, men publiserer en vanlig tabell (X-/Y-kolonner) for semantikk og skjermlesere.
Nettleserstøtte: Fargene på punktene kommer fra samme lagdelte, :nth-child-baserte løsning som chart-line/chart-bar (seks faste kategori-tokens) - ingen ekstra forbehold utover nyeste Chrome/Safari.
Design-tokens: var(--border-color, ...), var(--opacity-muted, ...), var(--color-surface, ...)
Sist endret: 19. september 2026
Brukt: Ikke i bruk andre steder ennå

Formål

Punktdiagram for å utforske sammenhengen (korrelasjon/spredning) mellom to numeriske variabler i et datasett. I motsetning til chart-line/chart-area/chart-bar, som alle forutsetter én ordnet kategoriakse, er x her en fri numerisk verdi - punktene plasseres etter faktisk x/y-verdi, ikke etter indeks.

Egner seg for

Utforske om to numeriske variabler henger sammen, f.eks. reiselengde mot kostnad, eller alder mot inntekt i et større datasett.
Datasett med mange enkeltobservasjoner der fordeling/spredning er mer interessant enn en sum eller trend.

Egner seg ikke for

Data ordnet langs én kategoriakse (tid, navngitte grupper) - bruk chart-line/chart-area/chart-bar da, som viser rekkefølge tydeligere.
Svært store datasett (mange tusen punkter) i uforandret form - SVG-en tegner ett DOM-element per punkt; aggreger/sample dataene først (se guiden om store datasett).

Bruk

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

<lm-chart-scatter tittel="Reiselengde mot kostnad" x-etikett="Kilometer" y-etikett="Kostnad"></lm-chart-scatter>

const diagram = document.querySelector("lm-chart-scatter");
diagram.data = [
    {x: 120, y: 450, label: "Tur til Bergen"},
    {x: 30, y: 90, label: "Dagstur"},
    {x: 800, y: 2100, label: "Interrail"},
];
diagram.formatVerdi = (value) => `${value} kr`;

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`data`	`Array<{x: number, y: number, label?: string, color?: string}>`	[]	Property. Ett punkt per datarad. `x`/`y` er frie numeriske verdier (ikke etiketter/indekser).
`tittel`	`string`	""	Attributt/property. Tekst brukt som `<caption>` i den skjulte datatabellen.
`x-etikett`	`string`	"X"	Attributt/property (`xEtikett`). Kolonneoverskrift/tooltip-navn for x-verdien.
`y-etikett`	`string`	"Y"	Attributt/property (`yEtikett`). Kolonneoverskrift/tooltip-navn for y-verdien.
`formatVerdi`	`(value: number) => string`	String(value)	Property. Formatterer x-/y-verdiene i akse-etikettene, punktenes native `<title>`-tooltip og i datatabellen.

Parts

Part	Beskrivelse
`diagram`	Ytterrammen rundt diagram og tabell.
`diagram-visual`	SVG-flaten.
`data-tabell`	Skjult datatabell for tilgjengelighet.
`akse`	Hver av de to aksene (x og y).
`etikett`	Min-/maks-tallene langs hver akse.
`punkt`	Hver datapunktmarkør.

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-scatter::part(diagram) {
    /* egne stiler for "Ytterrammen rundt diagram og tabell." */
}

lm-chart-scatter::part(diagram-visual) {
    /* egne stiler for "SVG-flaten." */
}

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

lm-chart-scatter::part(akse) {
    /* egne stiler for "Hver av de to aksene (x og y)." */
}

lm-chart-scatter::part(etikett) {
    /* egne stiler for "Min-/maks-tallene langs hver akse." */
}

lm-chart-scatter::part(punkt) {
    /* egne stiler for "Hver datapunktmarkør." */
}

Tilgjengelighet

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en med kolonner for etikett, X og Y. Akse-etikettene (min/maks) er vanlig, synlig SVG-tekst med dempet opasitet via --opacity-muted. Komponenten er ren presentasjon uten tastaturstøtte. prefers-reduced-motion: reduce slår av punkt-animasjonen, og forced-colors: active bruker systemfarger.

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en.
Tabellen har kolonner for etikett, X og Y, samt <caption> fra tittel.
Komponenten er ren presentasjon uten tastaturstøtte.
prefers-reduced-motion: reduce slår av animasjoner, og forced-colors: active bruker systemfarger.

Referanser

Se også:

../chart-line/index.html - viser én ordnet serie i stedet for frie x/y-punkter - bruk den når x representerer en kategori/rekkefølge.
../chart-area/index.html - viser flere ordnede serier samtidig i stedet for spredningen mellom to variabler.

Avhengigheter: designsystem/funksjoner/sikkerhet/escape-html/