Back to components

Data Visualization

Data visualisations are meant to visualise data in a intuitive and visually appealing way.

This component contains helper components to be used with data visualization.

Table of Contents

Edit this section, Opens in new window

Overview

As there are several frameworks and ways to implement data visualization, there are some components that could be useful when implementing charts or infographics.

Legends, Infographic text, to mention a few.

Edit this section, Opens in new window

Legend

33%
If P&C Insurance Ltd
67%
Competitors

Positioning

The legend should always be positioned accordingly; either to the right/left of the chart, or below the chart.

CHART HERE
LEGEND HERE
BODY TEXT HERE
CHART HERE
LEGEND HERE
BODY TEXT HERE
CHART HERE
CHART HERE
LEGEND HERE
CHART HERE
LEGEND HERE
CHART HERE
LEGEND HERE

Anatomy

33%
If P&C Insurance Ltd
67%
Competitors
Legend
  1. Symbol
  2. Value
  3. Name
Edit this section, Opens in new window

Infographics

Info box data visualisation

Om du är 40 år och har 500 000 kr i upparbetat tjänstepensionskapital och sänker dina totala avgifter med 1 % så får du 1 117 222 kr mer i pension*. Bara sådär!

Att flytta pensioner i allmänhet och tjänstepensioner i synnerhet kan vara både krångligt och tidskrävande. För att en tjänstepension ska kunna flyttas behövs underskrift från firmatecknare på det bolag som en gång betalt in pengarna, även om du inte jobbar kvar där idag. Detta gör att många inte orkar fullfölja pensionsflytten då det helt enkelt är för mycket jobb. Underskrifterna måste dessutom vara i original och ibland även på särskilda blanketter som endast går att beställa via telefon hos det försäkringsbolag man vill flytta ifrån.

2 000 000SEKNew customers throughout the fiscal year 2019 and 2020

Anatomy

2 000 000SEKNew customers throughout the fiscal year 2019 and 2020
Infographic with postfix
  1. Number
  2. Postfix
  3. Description
82%Text to explain the number above
Infographic with highlight and postfix
  1. Transparent box
  2. Highlighted number
  3. Postfix
7,4Text to explain the number above
Infographic with blue highlight
  1. Highlighted blue number
Edit this section, Opens in new window

Charting libraries

It's not important which library or tool you use to create good visualizations, as long as you follow our guide in regards of color usage and visualization types.

However, we recommend some libraries to be utlized, for best implementation.

Allthough we recommend these libraries, you are not bound to use any of them. Use the framework that fits your environment.

Highcharts

Most of our example charts are built with Highcharts. It is easy to work with and decent to add our own styling to the charts.

You can change the look and feel both programatically and with CSS. We recommend to style with CSS.

Example

.highcharts-color-0
  fill $color-data-chromatic-green
  stroke $color-data-chromatic-green

.highcharts-color-1
  fill $color-data-chromatic-yellow
  stroke $color-data-chromatic-yellow

.highcharts-color-2
  fill $color-data-chromatic-red
  stroke $color-data-chromatic-red

.highcharts-color-3
  fill $color-data-chromatic-blue
  stroke $color-data-chromatic-blue
Highcharts

Chart.js

Chart.js is a canvas-based charting tool, where styling is only done programatically.

Chart.js logo

Chart.css

Chart.css is a CSS-based charting tool, where styling is only done with CSS.

Chart.css logo

Google Charts: GeoChart

For geo charts, you can use Google GeoCharts.

Edit this section, Opens in new window
Contact us, Opens in new window