Chart

component chart heatfield

Introduction

The chart component represents one or more metrics over time.

Chart example

Styleguide

Basic chart grid

Basic chart grid

Chart top spacing

height: 12px
width: 100%

Chart area

height: 168px
width: 100%

X-axis

height: 24px
width: 100%

Y-axis

height: 100%
width: 58px

Legend

height: 16px
width: 100%
margin-top: 12px

Basic chart elements

Basic chart elements

Frame

border-width: 1px
border-color: $gray-300

Axis caption

font-family: Bernina Sans Regular
font-size: 12px
font-color: $gray-700

Y-axis left

text-align: right
margin-right: 4px

Y-axis right

text-align: left
margin-left: 4px

Tick horizontal

color: $gray-300
line: 1px
width: 4px

Tick vertical

color: $gray-300
line: 1px
height: 4px

Legend

font-family: Bernina Sans Regular
font-size: 12px
font-color: $gray-700
icon: 16px
distance between icon and text: 4px
distance between legends: 16px

Chart types

Area chart

Area chart

Bar chart

Bar chart

Stacked bar chart

Horizontal bar chart

Donut or pie chart

In donut charts the visualization of the legend can vary.

Donut chart

Donut chart

Donut chart

Pie chart

Line chart

line: 2px

Line chart

Min/Max chart

The min/max chart shows the area between min and max value. The average or median is represented by a line. It can be combined with a bar chart. Therefore, it gets multiplied with the background.

Min/max chart

Mixed chart

In mixed charts use a dark shade for the lines, to ensure readability. Area charts are drawn in a bright colors and moved to the back.

Mixed chart

Chart legend

Click on chart legend

If there is more than one metric in a chart, clicking a chart legend can toggle the metric in the chart.

Disabled chart legend

Clicking a chart legend disables the metric, therefore it's possible to focus on individual metrics in a chart. Clicking the legend a second time re-enables the metric.

Disabled chart legend

font-color: $gray-300
icon-color: $gray-300

Legend icons

The icons in the chart legend are always 16x16px. Please use the following icons as legends:

Chart colors

Up to 3 metrics

If there are not more than 3 metrics in the chart, use the basic theme color of the entity. Consider the shades and order described in the themed chart colors.

More than 3 metrics

If more colors are needed (e.g. for custom charting), please use the sorted chart colors.

Chart colors

Behavior

Zooming and panning in charts

On hover, the zooming and dragging buttons appear in the upper left corner of the chart.

Panning behavior

On click and drag the cursor changes from the default one to a horizontal move cursor (ew-resize), the user can drag the chart to the left and right. Clicking the arrow buttons on the top left, the chart jumps a whole time interval to the right or left.

Zooming behavior

Zooming in charts is possible via pressing shift + alt + scrolling up or down. On click of the zoom buttons + and -, to the selected time.

Zooming and panning in charts

Zooming and panning buttons

x: 8px
y: 28px
icon: 20px

Please have a look at the style of the secondary button for hover and disabled states. For zooming in, use the plus icon, for zooming out the minus icon. For panning to the left and right, use the arrow icon.

Switching displayed metrics

The metrics displayed in the chart can be switched by tabs.

Loading chart values

Loading chart

Have a look at the loading distractor for details.

Chart overlays

Example with chart

For the styling of chart overlays view the overlay styleguide.

Heatfields (optional)

Problems and events in charts can be displayed as heatfields. On hover, further information is displayed in an interactive overlay. This overlay contains a short description and a link. It can be fixated with a click. The overlay will appear on the left- or right side of the heatfield.

Chart with heat field

Default

Heatfields default

height: 8px
fill: $red-500
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px

Hover

Heatfields hover

fill: $red-600
outline: 2px solid white

Selected

Heatfields selected

x: 8px
height: 12px
fill: $red-700
outline: 2px solid white
border-radius: 3px
margin-bottom: 2px
chart-background: $red-100 //heatfield area only

Interactive Overlay