<lm-chart-bar> – Stolpediagram / Bar chart

Om komponenten

Kanonisk navn: <lm-chart-bar>
Synonymer: stolpediagram, søylediagram, bar chart, column chart, chart
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, stolpe, etikett
Native-first-vurdering: HTML har ingen innebygd primitiv for stolpediagram. Komponenten kombinerer derfor egen visualisering med en semantisk tabell som tilgjengelighetsgrunnlag.
Nettleserstøtte: Fargene på stolpene kommer fra en lagdelt løsning: en grunnlinje som alltid virker, pluss en progressiv forbedring i nyere nettlesere. Grunnlinje (alle nettlesere): stolpene sykler gjennom de seks faste --lm-chart-color-1..6-tokenene via CSS :nth-child(6n+N) - samme, forutsigbare fargesyklus uansett antall stolper. Progressiv forbedring (kun nyere Chromium-versjoner per i dag): sibling-index()/sibling-count() brukes til å generere fargehuen jevnt fordelt over det faktiske antallet stolper (3 stolper gir 120° mellom hver, 8 stolper gir 45° mellom hver), i stedet for en fast, seks-leddet syklus. Feature-detected via @supports (z-index: sibling-index()) - i nettlesere uten støtte (eller der funksjonen kun er delvis implementert og resolver ugyldig ved beregnet verdi) faller regelen automatisk tilbake til :nth-child-syklusen over, uten noen synlig feil.
Design-tokens: var(--border-color, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Generisk stolpediagram for én serie etikett/verdi-par. Viser bare diagrammet og en skjult, semantisk datatabell for tilgjengelighet.

Egner seg for

Sammenligning av diskrete kategorier når én serie stolper er nok.
Datasett som også skal tilbys som skjult tabell med <caption>.

Egner seg ikke for

Flere serier, stablede stolper eller behov for legende og akseverdier; komponenten tegner bare én serie.
Visuell fremheving av negative verdier; verdier under 0 klampes til 0 i stolpene.

Bruk

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

<lm-chart-bar tittel="Omsetning per kvartal"></lm-chart-bar>

const diagram = document.querySelector("lm-chart-bar");
diagram.data = [
    {label: "Q1", value: 12},
    {label: "Q2", value: 18},
    {label: "Q3", value: 9},
    {label: "Q4", value: 15, color: "var(--category-color-one)"},
];
diagram.formatVerdi = (value) => `${value} mill. kr`;

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 stolper, 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 stolpenes 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.
`stolpe`	Hver stolpe.
`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-bar::part(diagram) {
    /* egne stiler for "Ytterrammen rundt diagram og tabell." */
}

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

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

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

lm-chart-bar::part(stolpe) {
    /* egne stiler for "Hver stolpe." */
}

lm-chart-bar::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 verdier. Komponenten er ren presentasjon uten tastaturstøtte. prefers-reduced-motion: reduce slår av 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 bruker <caption> fra tittel, <th scope="row"> og formatterte verdier.
Komponenten er ren presentasjon uten tastaturstøtte.
prefers-reduced-motion: reduce slår av animasjonen, og forced-colors: active bruker systemfarger.

Referanser

Se også:

../chart-line/index.html - viser samme type enkle serie-data når utvikling mellom punkter er viktigere enn stolpe-sammenligning.
../chart-pie/index.html - viser de samme etikett/verdi-parene som andeler av en total i stedet for som separate stolper.

Brukes av:

Ingen ennå - ny komponent.

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