Chart Styling

This page is will help you to style your charts in a way that makes them easier to read and improve their look and feel for the user. On here you will find an overview of styling options that apply to all the available chart widgets (with some exceptions). The individual pages for each chart type (bar, pie, etc.) will go into more detail on specific options that apply uniquely to the relevant chart type. So, if you can’t find the styling option on here, you may find them on the chart page.

1 Margins
2 Font Size
3 Cropping labels
4 Percentage toggle button
5 Legend
6 Chart Colors
7 Change colour of labels
8 Adding thousand seperators to a tooltip for map charts
9 Format large numbers for bar charts (only in EN)

Margins

Margins ensure that all parts of your charts remain readable. You can edit how much of a margin you want by using the following line of code:

{
  margin: {
    top: 50, 
    right: 50,
    bottom: 50,
    left:50
  }
}

Editing margins will often be required if you change the angle of of labels or use legends.

Cropping labels

Sometimes labels may be too long to fit into the widget and overflow. In the settings you can use the cropLabels function to adjust their character lenght to fit the window. The maxLineLenght specifies the maximum number of characters you wish to have in a line and the chart will cut insert a line break behind the number of characters you entered (8 in the example below). The maxLines part of the code determines the maximum number of lines that will be displayed. This means if there is more text than would fit into the number of lines, the text will be cut off at the end of the line you specified (Line 5 in the example below).

{
cropLabels: {
    maxLines: 5,
    maxLineLength: 8
            }
}

Percentage toggle button

A percentage toggle button allows users to switch from the (default) value view into a view that displays the percentages of each part of the chart.

You can activate and position the percentage toggle under the ‘Display settings’ tab in the chart editor:

Legend

You can add, position and set a width and height to a chart legend under the ‘Display settings’ tab in the chart editor:

Long legend labels will be ellipsed automatically, but you also have the option to display the long labels in full over multiple lines. using maxLines:

A further configuration option (add in under the ‘Editor’ tab) lets you decide between a column and a row layout for the legend: direction: 'column' or direction: 'row'.

If you want to disable the default hover effect in a legend, use "addHoverEffect: false".

Chart Colors

There is a default theme integrated into the Connect platform and you can select, create and adjust themes in the administration section. If you want to change the colours in a specific chart you can do this by using the follwoing lines of code.

Colours must be listed by their Hex colour code.

Note: If there are more elements than colors, the color selection starts again from the top.

New matching color palettes can be created here:
https://colorpalettes.net/
https://coolors.co/1c0221-7b5e7b-938274-e9eb87-b9f18c

Change colour of labels

In order to change the colour of the labels used in a chart the following code line will do it:

Note: Colours must be specified in Hex colour code.

Format large numbers for bar charts (only in EN)

You can choose to display large numbers on charts in shorter format, e.g. 100 000 → 100K and 1 400 000 → 1,4M. Note that the formatting in EN language specific.