QReg5 Design System

Axlar och målområden

Övergripande rekommendationer för diagram. Riktlinjerna på denna sida är utformade efter uppbyggnaden och förutsättningarna i SAS VA.
En del rekommendationer kommer att förändras över tid.

Marginaler

Inställningarna för marginaler och innermarginaler ställs in på olika ställen. En del av övergripande för rapporten och andra ställs in på respektive objekt.

Övergripande inställning för innermarginal på hela rapporten sätts till padding 16px.

Varje diagramobjekt ska sen ha padding 24px och en border 4px.

Axlar

Typografi och färger

Grundtypsnittet för varje diagramobjekt är Inter (i vikten 400/Regular).

Diagrammets rubriker och numrering linjeras i vänsterkant. Diagramrubriken ska vara satt i Inter Semi. Eventuell underrubrik Inter (400/Regular), samma grad som rubrik. Storlek 16.

Axelbeskrivningar (Axis label) Inter (400/Regular). Storlek 10.

Etiketter till grafer (Tick values) Inter (400/Regular). Storlek 9.

Hjälptexter (Data tip) Inter (400/Regular). Storlek 12.

När förklaringsruta (Legend) behövs ska den placeras under diagrammet, alternativt i ritytan.

Kringinformation så som källa ska vara vänsterställd under förklaringsrutan om den placerats vänsterställd under diagrammet.

RollValue
Background#FFFFFF
Border#F5F5F5
Headlines#333333
Gridlines#666666
Axis label#333333
Axis lines#666666
Tick values#666666
Data tip background#333333
Data tip style#F5F5F5

Målområden

Målområden kan användas för att illustrera exempelvis måluppfyllnad i diagram.

När man använder målområden bör man samtidigt komplettera diagrammet med en tabell som också kan spegla informationen. Detta för att möta WCAG-kraven.

BeskrivningTokenValue
Målet uppfylltTarget-Full#ADD9BE
Målet delvis uppfylltTarget-Partial#E7FAEC

Exempel på applicering av målområden i ett stapeldiagram

Exempeldiagram med synliga målområden i ett stapeldiagram.