Property reference
Beneath views, Kumu uses a powerful CSS-based language to control the appearance of your maps.
If you're familiar with CSS, the advanced view editor will quickly become your best friend. The view builder only exposes a small set of the available properties. Being able to write views by hand is the only way to harness the full power of Kumu.
Note: We've adopted standard CSS properties and values wherever possible, straying where conventional values were irrelevant or misleading (eg display: map vs display: block), and adding properties specific to Kumu (such as bullseye-color).
There are just few more things you should know about the valid values listed below:
color
Any CSS web color or hex color code
colorPalette
'Field name'
number or [number]
Any number
number number
Any two numbers separated by a space, e.g. 5 10
0
Only the number 0
0..1
Any number between 0 and 1
generic-family
The name of any CSS web safe font family
family-name
The name of any font family. freight-text-pro and proxima nova will always work, but other non-web-sage font families will only work if your reader has the font installed on their device.
icon-name
icon-style
solid or regular
https://...
Any URL. URLs starting with https are safest and will work best within Kumu.
string template
auto, background, bold, bottom, center, circle, clip, contain, cover, dashed, gradient, hidden, inherit, italic, manual, map, none, normal, off, rectangle, solid, square, url, visible, or wrap
That exact keyword
All values are unitless.
Supported Properties
The table below lists all of the properties recognized by elements, connections, and loops. Hover over the information icon at the far right of the table rows to see additional details and valid values for each property (when there are multiple valid values, we've listed them as separate snippets of inline code).
If you find a property or a value that's not documented here, let us know!
arrow-color
Override the arrow color for a connection.
color
arrow-height
Used in combination with arrow-min-height to set arrow height.
number
arrow-min-height
Used in combination with arrow-height to set arrow height.
0
arrow-min-width
Used in combination with arrow-width to set arrow width.
0
arrow-visibility
Controls arrow visibility for directed connections.
visible hidden
arrow-width
Used in combination with arrow-min-width to set arrow width.
number
border-color
Controls border color.
color
border-opacity
Controls border opacity.
0..1
border-width
Controls border width.
number
bullseye-color
Controls bullseye color.
color
bullseye-opacity
Controls bullseye opacity.
0..1
bullseye-size
Controls bullseye size.
0..1
bullseye-visibility
Controls bullseye visibility.
visible hidden
color
Controls shapes' color. (gradient only available for connections)
color
or
gradient(color, color)
curvature
Controls line curvature.
0..1
dash
Controls the length of connection dashes (first number) and the distance between them (second number).
number number
delay-color
Controls color of delay markings.
color inherit
delay-height
Controls height of delay markings.
number
delay-position
Controls delay markings' position along the connection.
0..1
delay-stroke-width
Controls width of delay markings.
number
delay-visibility
Controls visibility of delay markings.
visible hidden
delay-width
Controls space between delay markings.
number
display
Controls inclusion in the map. Hidden objects will be fully removed from the map.
map none
flag
Defines field and color scale for flags.
'Field name' with colorPalette
flag-offset
Controls space between flags and their elements.
number
flag-size
Controls thickness of flags.
number
font-color
Controls label font color.
color
font-family
Controls label font family.
family-name generic-family
font-size
Controls label font size.
number
font-style
Controls label style.
normal italic
font-weight
Controls label font weight.
normal bold
height
Controls height of elements that are squares and/or rectangles.
auto number
icon
Adds an icon as the item's image.
icon-name icon-name icon-style off
icon-color
Controls the icon color.
color
image-size
Controls image size.
cover contain
image-url
Provides source url of image.
url(http://...)
image-visibility
Controls image visibility
visible hidden
label
Replaces the default label with a label template.
none string template
label-visibility
Controls label visibility for all types.
visible hidden
layer
Controls whether an item is in the foreground or background.
auto background
length
Controls connection resting length.
number
margin
Controls amount of space between the border of an element and its connections.
number none
opacity
Controls loop label opacity and element opacity.
Number between 0..1
outline-color
Controls the color of selected elements' outlines.
color
outline-offset
Controls the distance between selected elements and their outlines.
number
outline-opacity
Controls the opacity of selected elements' outlines.
0..1
outline-width
Controls the width of selected elements' outlines.
number
padding
Controls amount of space between the border of an element and its contents (image or bullseye).
number
path-opacity
Controls connection opacity.
0..1
pattern
Controls connection pattern. Equivalent of style.
solid dashed
pointer-events
Controls whether or not an item can be clicked.
auto none
popover
Sets the popover content
none string template
prepost-inset
Controls the inset of pre-labels and post-labels.
number
prepost-offset
Controls the offset of pre-labels and post-labels.
number
profile
Controls whether or not the profile can be opened
true false
scale
Controls element and connection scale (multiple of base size).
number
shadow-color
Controls shadow color.
color
shadow-opacity
Controls shadow opacity.
0..1
shadow-size
Controls shadow size.
1..5
shadow-visibility
Controls shadow visibility
visible hidden
shape
Controls shape.
circle square rectangle
size
Controls base size.
number
strength
Controls connection strength.
0..1
style
Controls connection style. Equivalent of pattern.
solid dashed
text-align
Controls alignment of element labels.
bottom center
text-overflow
Controls text wrapping and truncating.
off auto auto [number] manual wrap wrap [number] clip clip [number] none
visibility
Controls visibility. Hidden objects will still affect layout and metrics.
visible hidden
width
Controls width of elements that are squares and/or rectangles.
auto number
Last updated