The chart component represents one or more metrics over time.
Basic chart grid
Chart top spacing
height: 12px width: 100%
height: 168px width: 100%
height: 24px width: 100%
height: 100% width: 58px
height: 16px width: 100% margin-top: 12px
Basic chart elements
border-width: 1px border-color: $gray-300
font-family: Bernina Sans Regular font-size: 12px font-color: $gray-700
text-align: right margin-right: 4px
text-align: left margin-left: 4px
color: $gray-300 line: 1px width: 4px
color: $gray-300 line: 1px height: 4px
font-family: Bernina Sans Regular font-size: 12px font-color: $gray-700 icon: 16px distance between icon and text: 4px distance between legends: 16px
Donut or pie chart
In donut charts the visualization of the legend can vary.
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.
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.
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.
font-color: $gray-300 icon-color: $gray-300
The icons in the chart legend are always 16x16px. Please use the following icons as legends:
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.
Zooming and panning in charts
On hover, the zooming and dragging buttons appear in the upper left corner of the chart.
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 in charts is possible via pressing shift + alt + scrolling up or down.
On click of the zoom buttons
-, to the selected time.
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
Have a look at the loading distractor for details.
For the styling of chart overlays view the overlay styleguide.
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.
height: 8px fill: $red-500 outline: 2px solid white border-radius: 3px margin-bottom: 2px
fill: $red-600 outline: 2px solid white
x: 8px height: 12px fill: $red-700 outline: 2px solid white border-radius: 3px margin-bottom: 2px chart-background: $red-100 //heatfield area only