<lm-chart-pie> – Sektordiagram / Pie chart

Om komponenten

Kanonisk navn: <lm-chart-pie>
Synonymer: sektordiagram, kakediagram, donut, smultringdiagram, pie chart, donut chart, proportion chart, share chart
Kategori: data-visualisering
ARIA-mønster: Ikke aktuelt - Statisk datavisualisering med skjult datatabell, ikke en interaktiv ARIA-widget.
Parts: diagram, diagram-visual, sum, data-tabell
Native-first-vurdering: HTML har ingen standardkomponent for sektordiagram. Komponenten bruker derfor egen visualisering, mens den semantiske tabellen bærer tilgjengeligheten.
Nettleserstøtte: Bruker conic-gradient (bakgrunnen) og clip-path: circle() (avslørings-animasjonen) - begge er bredt støttet i moderne nettlesere. Uten clip-path-støtte vises kakediagrammet uten inn-animasjon (statisk, hele kaken synlig med én gang) - ingen feil, kun tapt finpuss. Donut-varianten (hull) legger i tillegg på en CSS mask: radial-gradient(...) som punsjer hullet - mask støttes i alle moderne evergreen-nettlesere og komponerer fritt med clip-path-animasjonen, siden de er to uavhengige rendrings-steg. Strukturelt forbehold - ingen sibling-index()-generert farge her: i motsetning til <lm-chart-bar>/<lm-chart-line> (som genererer sin fargehue fra sibling-index()/sibling-count() i nettlesere med støtte, se deres respektive "Nettleserstøtte"-seksjoner) bruker <lm-chart-pie> bevisst ikke denne teknikken. Kakediagrammet er, av ytelsesgrunner, én enkelt conic-gradient(...)-bakgrunn med beregnede fargestopp - ikke separate DOM-elementer per kakestykke - og har derfor ingen "søsken" sibling-index() kan telle på. Komponenten konsumerer i stedet den delte --chart-color-1..6-familien direkte (samme, aksentfarge-avledede kilde som de to andre diagrammenes fallback-syklus bruker) - dette gir et konsistent fargeuttrykk på tvers av alle tre diagramtypene uten at kakediagrammet selv trenger sibling-index().
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Generisk sektordiagram for én serie etikett/verdi-par. Viser bare diagrammet og en skjult, semantisk datatabell for tilgjengelighet. Med hull blir det en donut-variant - samme diagram, men med et hull punsjet i midten via CSS mask, typisk brukt til å plassere et samlet nøkkeltall visuelt inni ringen.

Egner seg for

Enkle fordelinger der alle verdier inngår i én total.
Små datasett der den skjulte tabellen kan bære de eksakte tallene.

Egner seg ikke for

Datasett med null eller bare negative verdier; sektorer tegnes bare når summen av ikke-negative verdier er større enn 0.
Mange små sektorer eller behov for presis sammenligning; bruk <lm-chart-bar> når kategorisammenligning er viktigst.

Bruk

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

<lm-chart-pie tittel="Fordeling av trafikkilder"></lm-chart-pie>

const diagram = document.querySelector("lm-chart-pie");
diagram.data = [
    {label: "Direkte", value: 48},
    {label: "Søk", value: 32, color: "var(--category-color-three)"},
    {label: "Henvisninger", value: 20},
];
diagram.formatVerdi = (value) => `${value} %`;

<!-- Donut-variant med sentrert totalsum -->
<lm-chart-pie tittel="Fordeling av utgifter" hull vis-sum sum-etikett="Totalt denne måneden"></lm-chart-pie>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`data`	`Array<{label: string, value: number, color?: string}>`	[]	Property. Dataserie brukt til sektorer og skjult datatabell.
`tittel`	`string`	""	Attributt/property. Tekst brukt som `<caption>` i den skjulte datatabellen.
`hull`	`boolean`	false	Boolsk attributt/property. Punsjer et hull i midten (donut-variant) fremfor en fylt sirkel - typisk brukt når midten skal vise et samlet nøkkeltall (f.eks. en `<lm-stat>`) ved siden av eller oppå diagrammet.
`vis-sum`	`boolean`	false	Boolsk attributt/property (kun sammen med `hull`). Viser summen av alle verdier (formattert med `formatVerdi`) sentrert inni donut-hullet, med `sum-etikett` som bildetekst under - inspirert av OpenBridge (openbridge-storybook.web.app) sin Donut Chart.
`sum-etikett`	`string`	"Totalt"	Attributt/property. Kort bildetekst under sumtallet når `vis-sum` er satt.
`formatVerdi`	`(value: number) => string`	String(value)	Property. Formatterer verdien i den skjulte datatabellen.

Parts

Part	Beskrivelse
`diagram`	Ytterrammen rundt diagram og tabell.
`diagram-visual`	Selve kakediagramflaten.
`sum`	Sentertekst-elementet med sum + bildetekst (kun til stede når `hull` + `vis-sum` er satt).
`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-pie::part(diagram) {
    /* egne stiler for "Ytterrammen rundt diagram og tabell." */
}

lm-chart-pie::part(diagram-visual) {
    /* egne stiler for "Selve kakediagramflaten." */
}

lm-chart-pie::part(sum) {
    /* egne stiler for "Sentertekst-elementet med sum + bildetekst (kun til stede når `hull` + `vis-sum` er satt)." */
}

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

Tilgjengelighet

Den visuelle kaken skjules med aria-hidden="true"; skjermlesere får den skjulte <table>-en med <caption> fra tittel. Tabellen bruker <th scope="row"> og formatterte verdier, slik at eksakte tall fortsatt er tilgjengelige. Komponenten er ren presentasjon uten tastaturstøtte. prefers-reduced-motion: reduce fjerner oppstartsanimasjonen, og forced-colors: active skjuler både den visuelle kaken og sentersum-teksten helt (skjermlesere har uansett den skjulte tabellen).

Den visuelle kaken skjules med aria-hidden="true"; skjermlesere får den skjulte <table>-en med <caption> fra tittel.
Tabellen bruker <th scope="row"> og formatterte verdier, slik at eksakte tall fortsatt er tilgjengelige.
Komponenten er ren presentasjon uten tastaturstøtte.
prefers-reduced-motion: reduce fjerner oppstartsanimasjonen, og forced-colors: active skjuler den visuelle kaken helt.

Referanser

Se også:

../chart-bar/index.html - er ofte et bedre valg når brukeren skal sammenligne kategorier presist i stedet for å lese andeler visuelt.
../chart-line/index.html - dekker samme datastruktur når rekkefølge og utvikling mellom punkter er viktigere enn andel av total.

Brukes av:

Ingen ennå - ny komponent.

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