<lm-chart-line> – Linjediagram / Line chart

Om komponenten

Kanonisk navn: <lm-chart-line>
Synonymer: linjediagram, trenddiagram, line chart, trend line, sparkline
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, linje, punkt, etikett
Native-first-vurdering: HTML har ingen innebygd primitiv for linjediagram. Komponenten bruker egen SVG-visualisering, men publiserer en vanlig tabell for semantikk og skjermlesere.
Nettleserstøtte: Linje og punkter har ÉN konsekvent farge (linjen arver currentColor, punktene bruker --lm-chart-color-1), siden komponenten representerer én ordnet trend - inspirert av OpenBridge (openbridge-storybook.web.app) sine linjediagrammer, som konsekvent bruker én farge per serie. Y-aksen tegner et lyst, tallmerket rutenett (finnSkalatrinn-genererte "pene" trinnverdier), samme mønster som <lm-chart-area>/<lm-chart-bar>. Enkeltpunkter kan fortsatt overstyres til en annen farge via punkt.color (f.eks. for å fremheve ett avvikende punkt).
Design-tokens: var(--border-color, ...)
Sist endret: 20. september 2026
Brukt: 2 steder

Formål

Generisk linjediagram for én serie etikett/verdi-par. Viser bare kurven, punktmarkører og en skjult, semantisk datatabell.

Egner seg for

Trendlinjer for én ordnet serie, f.eks. temperatur gjennom dagen.
Datasett der skjult tabell og enkel punktmarkering er nok.

Egner seg ikke for

Flere serier eller behov for egen legende og y-akse; komponenten tegner bare én linje.
Data der x-avstanden må følge faktisk tid eller avstand; punktene fordeles jevnt etter indeks.

Bruk

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

<lm-chart-line tittel="Temperatur gjennom dagen"></lm-chart-line>

const diagram = document.querySelector("lm-chart-line");
diagram.data = [
    {label: "08", value: 12},
    {label: "10", value: 15},
    {label: "12", value: 19, color: "var(--category-color-two)"},
    {label: "14", value: 17},
];
diagram.formatVerdi = (value) => `${value} °C`;

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 punkter, etiketter 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 punktmarkørenes 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`	Horisontal akse.
`linje`	Selve kurven.
`punkt`	Hver datapunktmarkør.
`etikett`	Hver kategorietikett.

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

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

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

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

lm-chart-line::part(linje) {
    /* egne stiler for "Selve kurven." */
}

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

lm-chart-line::part(etikett) {
    /* egne stiler for "Hver kategorietikett." */
}

Tilgjengelighet

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

SVG-en skjules med aria-hidden="true" og role="presentation"; skjermlesere får den skjulte <table>-en.
Tabellen bruker <caption> fra tittel, <th scope="row"> og formatterte punktverdier.
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-bar/index.html - viser samme type enkle kategori-data når sammenligning per kategori er viktigere enn utvikling mellom punkter.
../chart-pie/index.html - viser de samme etikett/verdi-parene som andeler av en total i stedet for som en sekvens.

Brukes av:

okonomi/formue/index.html - nettoformue-utvikling over tid.
okonomi/forbruk/analyse/index.html - kategoritrend, én kategoris utgifter per måned.

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