<lm-chart-area> – Arealdiagram / Area chart

Om komponenten

Kanonisk navn

<lm-chart-area>

Synonymer

arealdiagram, flerseriediagram, area chart, stacked area, trend flere kategorier, multi-series

Kategori

data-visualisering

ARIA-mønster

Ikke aktuelt - Statisk datavisualisering med skjult datatabell, ikke en interaktiv ARIA-widget.

Parts

diagram, diagram-visual, legende, legende-svatch, data-tabell, akse, flate, linje, etikett

Native-first-vurdering

HTML har ingen innebygd primitiv for arealdiagram med flere serier. Komponenten bruker egen SVG-visualisering, men publiserer en fullstendig tabell (én kolonne per serie) for semantikk og skjermlesere.

Nettleserstøtte

Ingen spesielle forbehold utover det resten av designsystemet forutsetter (nyeste Chrome/Safari). Seriefarger settes direkte i JS (ikke via :nth-child/sibling-index() som chart-line), siden flere style-egenskaper per element ikke lar seg matche pålitelig med CSS-attributtvelgere - dette unngår enhver nettleser-avhengighet i fargevalget.

Design-tokens

var(--border-color, ...), var(--space-small, ...), var(--space-medium, ...), var(--space-2xs, ...), var(--radius-small, ...), var(--font-size-extra-small, ...)

Sist endret

20. september 2026

Brukt

Ikke i bruk andre steder ennå

Formål

Flerserie-diagram som viser flere navngitte kategorier som fylte arealer under hver sin linje, over samme ordnede x-akse. Bygget for det chart-line eksplisitt ikke dekker: sammenligning av flere serier over tid/kategori i ett diagram, med innebygd fargeforklaring (legende) og en fullstendig, kolonnedelt datatabell for tilgjengelighet.

Merk: Basislinjen (0) er alltid synlig i diagrammet, uavhengig av dataenes faktiske min/maks - i motsetning til chart-line, som skalerer til min-verdien. Dette er bevisst: et fylt areal som ikke starter fra en synlig null ville gitt et visuelt misvisende inntrykk av andelen som er fylt.

Egner seg for

• Sammenligning av 2-6 kategorier over samme ordnede akse, f.eks. aktiva vs. gjeld over tid, eller besøk per kanal over måneder.
• Datasett der en samlet, tilgjengelig tabell med én kolonne per serie er den naturlige tilleggsvisningen.

Egner seg ikke for

• Én enkelt serie - bruk chart-line da, som har enklere API og samme visuelle språk for punkter.
• Serier med ulike eller ikke-overlappende etiketter; komponenten forutsetter samme kategoriakse for alle serier og fyller manglende punkter med 0 fremfor å justere aksen.
• Stablede (kumulative) arealer der seriene skal legges oppå hverandre - denne versjonen tegner arealene overlappende, ikke stablet.

Bruk

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

<lm-chart-area tittel="Aktiva og gjeld over tid"></lm-chart-area>

const diagram = document.querySelector("lm-chart-area");
diagram.data = [
    {
        navn: "Aktiva",
        punkter: [
            {label: "Jan", value: 120000},
            {label: "Feb", value: 128000},
            {label: "Mar", value: 135000},
        ],
    },
    {
        navn: "Gjeld",
        farge: "var(--color-fare)",
        punkter: [
            {label: "Jan", value: 80000},
            {label: "Feb", value: 78000},
            {label: "Mar", value: 75000},
        ],
    },
];
diagram.formatVerdi = (value) => `${value.toLocaleString("nb-NO")} kr`;

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Parts

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

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

lm-chart-area::part(legende) {
    /* egne stiler for "Listen med serienavn og fargeforklaring (vises kun ved 2+ serier)." */
}

lm-chart-area::part(legende-svatch) {
    /* egne stiler for "Fargeprikken foran hvert serienavn i legenden." */
}

lm-chart-area::part(data-tabell) {
    /* egne stiler for "Skjult datatabell for tilgjengelighet (én kolonne per serie)." */
}

lm-chart-area::part(akse) {
    /* egne stiler for "Horisontal nullinje/basislinje." */
}

lm-chart-area::part(flate) {
    /* egne stiler for "Det fylte arealet under hver serie sin linje." */
}

lm-chart-area::part(linje) {
    /* egne stiler for "Hver serie sin kurve." */
}

lm-chart-area::part(etikett) {
    /* egne stiler for "Hver kategorietikett langs x-aksen." */
}

Tilgjengelighet

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en med én kolonne per serie og <caption> fra tittel. Legenden er vanlig, synlig tekst (ikke skjult) og trenger derfor ingen egen ARIA - fargeprikkene er rent dekorative siden serienavnet alltid står ved siden av. Komponenten er ren presentasjon uten tastaturstøtte. prefers-reduced-motion: reduce slår av animasjoner, og forced-colors: active bruker systemfarger og tvinger arealene til Canvas-bakgrunn med synlig kontur.

• SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en.
• Tabellen har én kolonne per serie, <caption> fra tittel, <th scope="row"> per etikett og <th scope="col"> per serienavn.
• Legenden er alltid synlig tekst - ingen skjult duplikat trengs.
• 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 - enklere énserie-variant uten legende - bruk den når det kun er én kategori.
• ../chart-bar/index.html - viser samme type kategori-data som separate søyler i stedet for en kontinuerlig kurve.
• ../chart-scatter/index.html - viser to numeriske dimensjoner mot hverandre i stedet for én ordnet kategoriakse.

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