Diagram

Ritade av ECharts med Whitespaces tema: som SVG på servern, med verktygstips och tangentbord i webbläsaren. Varje diagram har en tabellvy. Under varje står vilken app som använder det och var.

Fler diagram: Staplar med jämförelse, Värmekarta med frånvaro, Träddiagram och En dags fördelning.

Färger

Tolv platser ur Skalor i fast ordning – ws-blue, amber, emerald, rose, ws-green, sedan ett mörkare varv – och Övrigt i slate. Mörkt läge har ljusare steg ur samma skalor.

Kategorier

123456789101112other

Storlek

seq-1seq-2seq-3seq-4seq-5

Avvikelse

negneg-softmidpos-softpos

--color-chart-1 … --color-chart-12, --color-chart-other
--color-chart-seq-1 … --color-chart-seq-5
--color-chart-neg, -neg-soft, -mid, -pos-soft, -pos

Linje

En serie över tid. Hårkorset hittar dagen och kortet visar värdena.

I bruk: Används inte än.

Besök per dag, september 2026

Tabell

	Besök
tis 1 sep	424
ons 2 sep	432
tor 3 sep	517
fre 4 sep	495
lör 5 sep	242
sön 6 sep	234
mån 7 sep	483
tis 8 sep	466
ons 9 sep	497
tor 10 sep	516
fre 11 sep	476
lör 12 sep	230
sön 13 sep	288
mån 14 sep	509
tis 15 sep	483
ons 16 sep	501
tor 17 sep	497
fre 18 sep	522
lör 19 sep	264
sön 20 sep	328
mån 21 sep	505
tis 22 sep	565
ons 23 sep	506
tor 24 sep	505
fre 25 sep	509
lör 26 sep	284
sön 27 sep	310
mån 28 sep	573

Källa: Matomo

<LineChart
  label="Besök per dag"
  subtitle="Besök per dag, september 2026"
  source="Matomo"
  xAxis={{ data: dagar, names: veckodagar, dividers: måndagar }}
  series={[{ name: "Besök", data: besök }]}
  reference={{ value: snitt, label: "Snitt 431" }}
/>

Flera serier

Linjerna namnges i förklaringen bredvid rubriken. En jämförelse (färgen Övrigt) är en tunn streckad linje, och serien den jämförs med får en ljus yta. Färgen följer projektet, inte ordningen.

Timmar per vecka, v. 27–38

Webbplats 2026
Intranät
Förvaltning 2026

Tabell

	Webbplats 2026	Intranät	Förvaltning 2026
v. 27	17 h	11 h	17 h
v. 28	19 h	13 h	21 h
v. 29	21 h	12 h	21 h
v. 30	23 h	8 h	21 h
v. 31	27 h	8 h	17 h
v. 32	50 h	22 h	20 h
v. 33	48 h	23 h	17 h
v. 34	53 h	22 h	16 h
v. 35	56 h	23 h	22 h
v. 36	56 h	19 h	24 h
v. 37	58 h	23 h	18 h
v. 38	62 h	22 h	17 h

Källa: Tid

<LineChart
  label="Timmar per vecka"
  xAxis={{ data: veckor }}
  yAxis={{ unit: "h" }}
  series={[
    { name: "Webbplats 2026", data: webb, color: 1 },
    { name: "Intranät", data: intra, color: 2 },
    { name: "Förvaltning 2026", data: förv, color: 3 },
  ]}
/>

Yta

En linje med en tunn tvätt under, för en enda mängd över tid.

I bruk: Används inte än.

Tabell

	Sidvisningar
tis 1 sep	47
ons 2 sep	48
tor 3 sep	57
fre 4 sep	55
lör 5 sep	27
sön 6 sep	26
mån 7 sep	54
tis 8 sep	52
ons 9 sep	55
tor 10 sep	57
fre 11 sep	53
lör 12 sep	26
sön 13 sep	32
mån 14 sep	57
tis 15 sep	54
ons 16 sep	56
tor 17 sep	55
fre 18 sep	58
lör 19 sep	29
sön 20 sep	36
mån 21 sep	56
tis 22 sep	63
ons 23 sep	56
tor 24 sep	56
fre 25 sep	57
lör 26 sep	32
sön 27 sep	34
mån 28 sep	64

<LineChart area label="Sidvisningar" … />

Staplar

Raka hörn och smal luft mellan grannar. Är staplarna få står värdet vid stapelns ände.

I bruk: Används inte än.

Nya ärenden per vecka, v. 27–38

Tabell

	Ärenden
v. 27	31
v. 28	28
v. 29	19
v. 30	12
v. 31	14
v. 32	22
v. 33	35
v. 34	41
v. 35	38
v. 36	33
v. 37	36
v. 38	29

Källa: Kundportalen

<BarChart
  label="Ärenden per vecka"
  subtitle="Nya ärenden per vecka, v. 27–38"
  source="Kundportalen"
  xAxis={{ data: veckor }}
  series={[{ name: "Ärenden", data: ärenden }]}
  reference={{ value: 30, label: "Mål 30" }}
/>

Grupperade

Två serier sida vid sida, förklaringen överst till vänster.

Timmar, hittills i år

Budget
Rapporterat

Tabell

	Budget	Rapporterat
Webbplats 2026	600 h	412,5 h
Intranät	240 h	228 h
Förvaltning 2026	240 h	247,5 h
Municipio Cloud	120 h	96 h
Analys-onboarding	20 h	18,5 h

Källa: Tid

<BarChart
  xAxis={{ data: projekt }}
  yAxis={{ unit: "h" }}
  series={[{ name: "Budget", data: budget }, { name: "Rapporterat", data: rapporterat }]}
/>

Staplade, i ordning

Allvarsgrad har en ordning, så den får en ton i steg (palette="seq") och inte fyra färger.

Ärenden per månad, april–september

Låg
Normal
Hög
Kritisk

Tabell

	Låg	Normal	Hög	Kritisk
apr	42	58	14	3
maj	38	61	18	2
jun	35	49	12	4
jul	20	31	6	1
aug	26	40	9	2
sep	44	66	17	5

Källa: Kundportalen

<BarChart stack palette="seq" xAxis={{ data: månader }} series={allvarsgrad} />

Liggande staplar

För långa namn och många kategorier. Namnet står till vänster, värdet vid stapelns slut; den första säger enheten.

I bruk: Används inte än.

Timmar per kund, september 2026

Tabell

	Timmar
Region Skåne	412,5 h
Skatteverket	247,5 h
Kommunal	228 h
Göteborgs Stad	182 h
Hemköp	140 h
Umeå universitet	96 h
Sandvik	88 h
Billerud	18,5 h

Källa: Tid

<BarChart horizontal xAxis={{ data: kunder }} yAxis={{ unit: "h" }} series={[{ name: "Timmar", data: timmar }]} />

Avvikelse

Över och under noll i två motsatta toner, med en neutral nollinje (diverging).

Timmar mot budget, september 2026

Tabell

	Avvikelse
Webbplats 2026	−38 h
Intranät	+12 h
Förvaltning 2026	+31,5 h
Municipio Cloud	−14 h
Analys-onboarding	+4,5 h
Supportavtal	−22 h

Källa: Tid

<BarChart horizontal diverging … series={[{ name: "Avvikelse", data: avvikelse }]} />

Ring

Del av helhet i en blick, summan i mitten och delarna bredvid. Fler än fyra delar slås ihop till Övrigt; nära värden vill ha staplar.

I bruk: Används inte än.

Timmar per aktivitet, september 2026

Utveckling612 h52 %
Design204 h17 %
Projektledning148 h13 %
Möten96 h8 %
Övrigt111 h9 %

Tabell

	Värde	Andel
Utveckling	612 h	52 %
Design	204 h	17 %
Projektledning	148 h	13 %
Möten	96 h	8 %
Övrigt	111 h	9 %

Källa: Tid

<PieChart label="Tid per aktivitet" unit="h" data={[{ name: "Utveckling", value: 612 }, …]} />

Punkter & bubblor

Två mått mot varandra. Högst tre serier, eftersom vilka två prickar som helst kan hamna bredvid varandra.

I bruk: Används inte än.

Ärenden och svarstid per kund, september 2026

Offentlig sektor
Näringsliv

Tabell

	Serie	Ärenden	Svarstid (median)
Region Skåne	Offentlig sektor	82	17,9 h
Skatteverket	Offentlig sektor	40	15,2 h
Kommunal	Offentlig sektor	28	14,7 h
Göteborgs Stad	Offentlig sektor	85	12,2 h
Umeå universitet	Offentlig sektor	102	8,1 h
Malmö stad	Offentlig sektor	90	17,3 h
Lunds kommun	Offentlig sektor	79	4,2 h
Hemköp	Näringsliv	38	5 h
Sandvik	Näringsliv	64	4,9 h
Billerud	Näringsliv	55	9,2 h
Volvo Cars	Näringsliv	25	2,2 h
Ikano Bank	Näringsliv	58	4,1 h

Källa: Kundportalen

<ScatterChart
  xAxis={{ name: "Ärenden" }}
  yAxis={{ name: "Svarstid", unit: "h" }}
  series={[{ name: "Offentlig sektor", data: [[42, 6.5, , "Skatteverket"], …] }, …]}
/>

Bubblor

Den tredje siffran är bubblans yta, inte dess diameter.

Budget, förbrukad andel och antal personer, 2026

Tabell

	Budget	Förbrukat	Personer
Webbplats 2026	600 h	69 %	6
Intranät	240 h	95 %	3
Förvaltning 2026	240 h	103 %	2
Municipio Cloud	120 h	80 %	2
Analys-onboarding	20 h	93 %	1
Tillgänglighet	400 h	42 %	4
E-tjänster	320 h	58 %	5

Källa: Tid

<ScatterChart bubble sizeName="Personer" series={[{ name: "Projekt", data: [[600, 69, 6, "Webbplats 2026"], …] }]} />

Trädkarta

Ytan är värdet. Grupper får var sin färg; en ruta för liten för sin text visar ingen. En andra rad, note: ett projekts namn under dess kod.

I bruk: Används inte än.

Timmar per kund och sektor, september 2026

Offentlig sektor
Näringsliv
Internt

Tabell

Grupp		Värde	Andel
Offentlig sektor	Region Skåne	412,5 h	26 %
Offentlig sektor	Skatteverket	247,5 h	15 %
Offentlig sektor	Kommunal	228 h	14 %
Offentlig sektor	Göteborgs Stad	182 h	11 %
Offentlig sektor	Umeå universitet	96 h	6 %
Näringsliv	Hemköp	140 h	9 %
Näringsliv	Sandvik	88 h	5 %
Näringsliv	Billerud	18,5 h	1 %
Internt	WS12 malm-ui och stilguiden	120 h	7 %
Internt	WS03 Sälj	44 h	3 %
Internt	WS07 Utbildning	30 h	2 %

Källa: Tid

<Treemap label="Timmar per kund" unit="h" data={[{ name: "Offentlig sektor", children: [{ name: "Region Skåne", value: 412.5 }, …] }, …]} />

Värmekarta

Skuggade celler med siffran i varje, elva steg räknade ur datat. Siffrorna finns också som tabell.

I bruk: Tid, Mitt och en persons timmar (person/DayHeatmap.astro).

Besök per veckodag och timme, september 2026

Tabell

Besök per veckodag och timme	8	9	10	11	12	13	14	15	16	17
Mån	85	105	111	124	98	88	116	88	85	93
Tis	89	88	102	103	100	95	99	82	94	95
Ons	75	12	84	73	79	88	67	78	84	40
Tor	81	84	77	30	73	78	76	80	65	65
Fre	81	97	104	90	87	101	90	89	84	86
Lör	0	0	6	0	0	0	0	0	0	0
Sön	0	7	0	0	0	0	0	6	0	0

Källa: Matomo

<Heatmap label="Besök per veckodag och timme" columns={timmar} rows={[{ label: "Mån", values: [85, 105, …] }, …]} />

Gnista

Formen bredvid siffran, utan axel. Läses som en bild: etiketten säger spannet och senaste värdet.

I bruk: Används inte än.

Besök14 380+8 %

Öppna ärenden29−4

Timmar1 432 h

<Sparkline label="Besök, 28 dagar" data={besök} />

Aktivitet

En rad per kund med en baslinje, en genomskinlig bubbla per dag, stor som dagens volym, och en ljus linje vid varje månad eller vecka. En tom rad behåller sin linje.

I bruk: Klient, klientens sida (pages/clients/[id]). Tid, projektets sida (pages/projects/[id]).

Möten och mejl per dag, juli–september 2026

Möten
Mejl

Tabell

	Möten	Mejl	Dagar	Första	Senaste
Region Skåne	17	127	34	1 jul	30 sep
Skatteverket	13	154	33	7 jul	29 sep
Kommunal	9	43	12	21 aug	21 sep
Hemköp	7	30	9	10 aug	30 sep
Umeå universitet	0	0	0	–	–
Billerud	1	21	4	9 jul	6 aug

Källa: Kundportalen

<ActivityTimeline
  label="Kontakter per kund"
  domain={{ from: "2026-07-01", to: "2026-09-30" }}
  series={[{ name: "Möten" }, { name: "Mejl" }]}
  rows={[{ label: "Region Skåne", href: "…", events: [{ date: "2026-08-12", value: 3, series: 1 }, …] }, …]}
/>

Ett spår

Utan radnamn: timmar per dag över hela projektet, överst på projektets sida.

Timmar per dag, 3 aug–30 sep

<ActivityTimeline label="Timmar per dag" unit="h" domain={projektperiod} events={allaTimmar} />

Aktivitet i en tabell

En rad av tidslinjen, kompakt nog för en tabellcell. Alla remsor delar domain och max, så en dag står på samma ställe och en timme är lika stor i varje rad; axeln står i kolumnens huvud.

I bruk: Tid, Rapport, Timmar, projektets sida och en persons arbete (ActivityStrip; TimelineAxis över kolumnen på tre av dem).

Person	Timmar	Timmar per dag
Linn Svensson	161,5
Paul Andersson	90
Niklas Ek	25,5
Eva-Maria Nilsson	40,5
Fredrik Holm	46,5

<th scope="col">Per dag <TimelineAxis domain={period} /></th>
…
<td><ActivityStrip label="Linn Svensson" unit="h" domain={period} max={8} events={linnsTimmar} /></td>

Under ett projekt

Rapporten per team: projektets rad och en indragen rad per person, med remsan i Förbrukat.

Projekt	Timmar	Förbrukat
Webbplats 2026	149,5
Linn Svensson	80,5
Paul Andersson	51
Niklas Ek	18
Intranät	65,5
Eva-Maria Nilsson	45
Paul Andersson	20,5

<td><ActivityStrip label="…" unit="h" domain={rapportperiod} max={max} events={…} /></td>

Eget diagram

För det inget av diagrammen ovan ritar: malm-uis ram och husstil kring en ECharts-option. Tillfälligt — be om ett namngivet diagram först.

I bruk: Används inte än.

Öppna ärenden vid dagens slut, september 2026

Tabell

Dag	Öppna
tis 1 sep	19
ons 2 sep	18
tor 3 sep	18
fre 4 sep	20
lör 5 sep	23
sön 6 sep	22
mån 7 sep	23
tis 8 sep	23
ons 9 sep	23
tor 10 sep	25
fre 11 sep	23
lör 12 sep	23
sön 13 sep	24
mån 14 sep	24
tis 15 sep	25
ons 16 sep	23
tor 17 sep	21
fre 18 sep	21
lör 19 sep	22
sön 20 sep	24
mån 21 sep	24
tis 22 sep	22
ons 23 sep	20
tor 24 sep	18
fre 25 sep	19
lör 26 sep	18
sön 27 sep	16
mån 28 sep	18

Källa: Kundportalen

<Chart
  label="Öppna ärenden vid dagens slut"
  subtitle="Ärenden, september 2026"
  source="Kundportalen"
  table={{ columns: ["Dag", "Öppna"], rows }}
  echarts={{
    tooltip: { trigger: "axis" },
    xAxis: { type: "category", data: dagar, boundaryGap: false },
    yAxis: { type: "value" },
    series: [{ type: "line", name: "Öppna", step: "end", data: öppna }],
  }}
/>

Inspiration

Välja diagram

FT Visual Vocabulary — Diagramform efter budskap: förändring, rangordning, del av helhet.
FT Visual Vocabulary, interaktiv — Samma karta med exempel på varje form.
FT Chart Doctor — Diagram före och efter, med motivering.

Hjälplinjer

ONS: Chart elements — Stödlinjer, nollinje, axlar och förklaring, mått för mått.
Dona Wong: The Wall Street Journal Guide to Information Graphics — Bok. Enheten en gång, på översta värdet; inga ramar.

Etiketter och sammanhang

Datawrapper: linjediagram — Etiketter vid linjen i stället för förklaring.
Datawrapper: värdeetiketter — Vilka värden som får en etikett, och var.
Datawrapper: tabeller — Tabellen bredvid diagrammet.

Text och husstil

The Economist: Mistakes, we’ve drawn a few — Egna diagram, omgjorda: titel, skala, ordning.
BBC bbplot — En husstil som kod.
Urban Institute — Stilguide och mallar för diagram.

ECharts

Rendering på servern — SVG ur samma option, utan webbläsare.
Tillgänglighet (aria) — Beskrivningen en skärmläsare får.
ECharts 6 — Vad version 6 ändrade.

Färger

Linje

Helgerna drar ner besöken

Webbplatsen drar ifrån efter semestern

Yta

Sidvisningar

Staplar

Fler ärenden efter semestern

Förvaltning har gått över budget

September hade flest ärenden

Liggande staplar

Region Skåne tar en fjärdedel av tiden

Tre projekt under budget, tre över

Ring

Hälften av tiden är utveckling

Punkter & bubblor

Fler ärenden ger inte längre svarstid

Två projekt har förbrukat hela budgeten

Trädkarta

Offentlig sektor tar två tredjedelar

Värmekarta

Helgen är tom, onsdag morgon också

Gnista

Aktivitet

Kontakterna tog fart i augusti

Webbplats 2026

Aktivitet i en tabell

Personer

Rapport

Eget diagram

Kön var längst mitt i månaden

Inspiration

Välja diagram

Hjälplinjer

Etiketter och sammanhang

Text och husstil

ECharts