Kumu
  • Getting started
    • Welcome
    • Kumu 101
    • First steps
    • Quick tips
    • Webinars
  • Overview
    • Kumu's architecture
    • Accounts and workspaces
    • Kumu.io and Kumu Enterprise
    • Billing
    • User interfaces
      • Dashboard
      • Settings
      • Map editor
      • View editors
      • Quick Actions
    • Collaborating and sharing
    • Actions and permissions
    • Security
    • Advanced Editor hub
      • @settings reference
      • @controls reference
      • Color reference
      • Property reference
      • Selector reference
  • DISCIPLINES
    • SNA / Network Mapping
    • Systems mapping
    • Systems Practice workbook
  • Guides
    • Activity feed
    • Add-ons
      • Disqus
    • Bridge
    • Cluster
    • Controls
      • Cluster control
      • Color-legend control
      • Filter control
      • Focus control
      • Image control
      • Label control
      • Showcase control
      • SNA-dashboard control
      • Tagged-timeline control
      • Text Control
      • Title Control
      • View toggle control
    • Decorations
      • Direct decorations
      • Data-driven decorations
      • Flags
      • Icons
      • Images
      • Label templates
      • Popovers
    • Default view settings
    • Export
    • Fields
      • Computed fields
    • Filter
    • Focus
    • Forking
    • Grids & Guides
    • Import
      • Structure your data for Kumu
      • Excel / CSV
      • Google Sheets
      • JSON / Blueprints
    • Imported views
    • Layouts
      • Fixed
      • Force-directed
      • Remove overlap
      • Scatter
      • Snap-to
    • Legends
    • Licensing
    • Lightbox
    • Loops
    • Metrics
    • Two-factor authentication
    • Pro workspaces
      • Archiving projects
      • Discussions
    • Partial views
    • Presentations
    • Profiles
      • Markdown
    • Project admin
    • Selectors
    • Shapes
    • Share and embed maps
    • Shortcuts
    • Showcase
    • Slugs
    • Table
    • Templates
      • Geo template
    • URLs
    • Views
    • Widgets
  • About Kumu
    • What is Kumu?
    • How does it work?
    • Where can I get help?
  • Enterprise
    • About enterprise
    • Getting started with VMWare
    • Upgrading
    • Configuration
    • Creating user accounts
    • SSH Access
    • Single sign-on
    • Backing up enterprise data
    • Restoring enterprise data
    • Command line utilities
    • Changelog
  • Frequently Asked Questions
    • Does Kumu have a public API?
    • Does Kumu make use of AI?
    • How do I add annotations?
    • How do I add anchors to my map description?
    • How do I add arrows to my connections?
    • How do I add documents to profiles?
    • How do I add more than one element with the same label?
    • How do I add text dropdowns to my map overview?
    • How do I adjust arrow size?
    • How do I avoid duplicating data?
    • How do I change connection curvature?
    • How do I change font color?
    • How do I change font size?
    • How do I change the default for currency fields?
    • How do I change the length or strength of connections?
    • How do I change the order of control options?
    • How do I change the position of my element labels?
    • How do I cite Kumu?
    • How do I collapse duplicate connections?
    • How do I copy a map to another project?
    • How do I control label size while scaling element size?
    • How do I control text wrapping?
    • How do I convert a project from private to public?
    • How do I convert a project from public to private?
    • How do I create dynamic on/off toggles for my map?
    • How do I customize link text in popovers?
    • How do I customize the order of my legend?
    • How do I delete a project, map, or view?
    • How do I delete data from my project?
    • How do I downgrade my subscription?
    • How do I edit virtual elements?
    • How do I get rid of duplicates?
    • How do I hide elements without connections?
    • How do I hide images from the map but keep them in the profile?
    • How do I hide labels on my map?
    • How do I hide the settings button?
    • How do I keep elements from moving?
    • How do I list an element's connections in its profile?
    • How do I make elements transparent?
    • How do I make sense of my receipt?
    • How do I open a sub-system when clicking on an element?
    • How do I remove the Opposite entry from my legend?
    • How do I remove unneeded controls?
    • How do I remove unwanted legend entries?
    • How do I rename my map/view?
    • How do I restructure my adjacency matrix?
    • How do I save my changes in Kumu?
    • How do I select options by default in my control?
    • How do I set a minimum or maximum zoom level for my map?
    • How do I show the Settings button?
    • How do I size elements based on number of connections?
    • How do I transfer a project?
    • How do I update my credit card information?
    • How much data can my Kumu project handle?
    • How do my readers switch between maps and views?
    • My data won't import. What can I do?
    • My Kumu embed is not working. What can I do?
    • My map disappeared. How do I bring it back?
    • My PDF won't export. What can I do?
    • What pricing plans does Kumu have?
    • Where can I find my invoices?
    • Where can I find example Kumu projects?
Powered by GitBook
On this page
  • Add legend entries through the Basic Editor
  • Add legend entries through the Advanced Editor
  • Change the legend title
  • Hide the legend
  • Legend reference

Was this helpful?

Edit on GitHub
  1. Guides

Legends

PreviousSnap-toNextLicensing

Last updated 10 months ago

Was this helpful?

Adding a legend to your map is an important step to make sure your readers can easily understand your decorations. There are a number of different ways to add and remove legend entries—this guide will explain all of them!

Note that you can only create a legend through . If you're using (the toolbar) to color, then you won't have a legend.

Skip to section:


Add legend entries through the Basic Editor

There are two ways to create your legend from the :

  1. Using the Color by, or Shape by options

  2. Using the (Decorate Elements & Decorate Connections)

Color by is a great way to get a legend up and running quickly, while the decoration builders are useful when your legend needs to be a bit more customized. Read on to learn more about both options.

Use the Color by tool to create a legend

Only color by the values being used

In some projects, you might have a long list of field values, but only use some of them on a given map. If that is the case, your Color by legend will include all of the possible field values, not just the values being used on your map.

  1. Add a new field—this new field can have any name, but something like "Color coding field" might be clear and easy to remember.

  2. Scroll down to the fields "Advanced settings" section.

  3. In the Expression box, paste in {{Field Name}}, replacing Field Name with the name of the field you originally wanted to color by. For example, if you want to color by the element type field, paste in {{element type}}.

  4. Click "Save" to save the field

With that done, you can return to the map, and use the Color by tool to color by your new computed field. Regardless of how many possible values you have in the original field, the legend will now only include the values being used on the current map.

Use the decoration builders to add legend entries

You can use the decoration builders to add many different kinds of items to your legend—for example, icons to indicate that elements or connections are being scaled in size:

Removing legend entries

For all other fields (including Element Type, Connection Type, and Loop Type), follow these steps:

  1. Click the menu in the upper left of your map and choose FIELDS

  2. Click on the field you want to edit

  3. Find the value you want to delete. Then, click the delete button next to the value to delete it.

  4. Scroll down and click SAVE to save your changes

  5. Refresh the page

After you follow these steps, the field value(s) you deleted will no longer show up in prompted lists, in legends, or in controls.

If you used the decoration builder to add a legend entry, you can go to the existing decorations section, click the pencil icon next to the decoration, and clear out the Label for Legend box. This will remove the legend item, but keep the decoration—if you'd rather delete both, you can click the delete icon in the existing decorations section.

Reordering legend entries

There are two ways to re-order legend entries, depending on how they were added. If you added legend entries using the Color by tool, follow these steps to change the order:

  1. Select Fields from the sidebar on the left

  2. Select the same field you selected in the Color by tool—it's settings panel will open up

  3. Drag and drop field values to change their order

  4. Click Save at the bottom of the field settings to save your changes, then reload the page

If you added legend entries using the decoration builder return to the Advanced Editor and locate the codes generated by Kumu for your custom decorations, cut and past the codes to re-arrange the legend entries the way you want them to appear on your map.

Add legend entries through the Advanced Editor

/* entry-type: Entry Label */

Replace entry-type with either elements or connections to tell Kumu what your decoration rule applies to. Replace Entry Label with the text that will appear in the legend. Your decoration rule should start on the next line down in the Advanced Editor.

Here's a working example from a decoration in one of the screenshots above:

/* elements: Authors, sized by number of articles written */
author {
  color: #918dc2;
  scale: scale("total articles", 0.5, 3);
  border-width: 1;
  border-color: #fcfcfa;
}

Note that you can combine multiple decoration rules into one block of code, and Kumu's legend will combine many of your rules into one legend icon. The code above will create the following entry in the legend, complete with color, border color, and scale:

Change the legend title

If you'd like to change the title of your legend from "Legend" to something more descriptive, you can use the following code:

@controls {
  bottom-left {
    legend {
      title: 'My custom legend title';
    }
  }
}

This is what it'll look like:

Hide the legend

If you want to completely hide the legend, you can use the Advanced Editor to do so. Here's some sample code to get you started:

@controls {
  bottom-left {}
}

Legend reference

Below is a list of all the icons you can add to your legend, as well as instructions on how to access the icons from the Basic and Advanced Editors.

None

Legend icon
Basic Editor
Advanced Editor

Decorate elements > Change color > Set a fixed element color

Decorate elements > Add shadow > color

Decorate elements > Add bullseye > color

Decorate connections > Change size > Scale connection widths by field

Decorate connections > Change color > Set a fixed connection color

Decorate connections > Change style > dashed

None

Legend icon
Basic Editor
Advanced Editor

Decorate elements > Change color > Set a fixed element color

Decorate elements > Add shadow > color

Decorate elements > Add bullseye > color

Decorate connections > Change size > Scale connection widths by field

Decorate connections > Change color > Set a fixed connection color

Decorate connections > Change style > dashed

When you use the tool in the Basic Editor, Kumu will automatically create your color legend, adding an item for each possible value in the field you're coloring by. For example, this map is colored by Element Type using the bujumbra scale:

This automatic legend feature also works when you're using Color by to add .

Note that the Color by tool will stop adding legend entries after it runs out of colors in its default color palette (seven colors). To make sure all your field values get included in the legend, you might need to click the expand icon and choose a . If the Color by tool is including some unwanted field values in your legend, try .

One more caveat about Color by: when you're using this tool, it's not possible to remove, replace, or edit individual colors from the color palette. To fully customize the colors in the palette, you can follow the guide to . Alternatively, you can read through to learn how to create a custom legend without using the Color by tool.

Using Kumu's feature, you can quickly solve this problem and create a legend with only the used values:

Open your and click "Fields"

For bonus points, use to hide your computed field from all profiles.

To add custom colors and icons to your legend, use the . Once you build out your decoration rule, fill in the "Label for Legend" box at the bottom of the decoration builder, and Kumu will add your decoration to the legend.

For a full list of legend icons you can add, .

The legend entries added from the decoration builder will be listed in the Basic Editor among other . If you hover over a custom decoration, you can click the pencil icon next to it to edit that entry, or you can click the trash can to delete that decoration.

Legend entries added using the Color by tool can only be removed by or that you don't want to see. To do this, you need to delete the underlying field value. This process is different depending on the field's .

For fields that have their prompt set to "Autocomplete" or "None" (this includes the Tags field), you can only delete the field value by removing it from every element, connection, and loop in the project, including the .

Some legend entries get added automatically when you apply different . Here's how to delete those entries:

For Person and Organization entries (stakeholder template), and Stock, Flow, Variable, Source, and Sink entries (stock and flow template), follow the guide to . Delete these values from the Element Type field.

For Adds to / same direction and Subtracts from / opposite direction entries (causal loop template), follow the guide to . Delete these values from the Connection Type field.

Opposite entry (system template): Open your , and, in the Template settings section, clear out the "Opposite connection label" box and click SAVE at the bottom.

Click the menu icon to bring up the

If you're working on decorations in the , you can add a comment above a decoration to tell Kumu that it should be included in the legend. The syntax is:

For a full list of legend icons and how to use them from the Advanced Editor, .

For more info on why and how this works, check out .

element {
    color: #34b3eb;
}
element {
    shadow-color: #34b3eb;
}
element {
    bullseye-color: #34b3eb;
}
element {
    border-color: #34b3eb;
}
connection {
    scale: scale("strength", 0.5, 3);
}
connection {
    color: #34b3eb;
}
connection {
    style: dashed;
}
element {
    color: #34b3eb;
}
element {
    shadow-color: #34b3eb;
}
element {
    bullseye-color: #34b3eb;
}
element {
    border-color: #34b3eb;
}
connection {
    scale: scale("strength", 0.5, 3);
}
connection {
    color: #34b3eb;
}
connection {
    style: dashed;
}
data-driven decorations
direct decorations
Use the Color by tool to create a legend
Use the decoration builder to add custom legend entries
Removing legend entries
Reordering legend entries
Add legend entries through the Advanced Editor
Change the legend title
Hide the legend
Legend code reference
Basic Editor
decoration builders
Color by
flags
larger color palette
deleting the unwanted values
define your own palette
the section below
computed fields
project settings
field relevance settings
element and connection decoration builders
jump to the legend reference
existing decorations
defining your own color palette
deleting the field values
prompt
trash
templates
delete field values
delete field values
default settings
Advanced Editor
jump to the legend reference
our full guide on built-in controls
project settings
bujumbra color by
label for legend box
Network map with cool legend entries
re-arranging legend entries via advanced editor
fancy legend combo
custom legend title
element color icon
element shadow color icon
element bullseye color icon
element border color icon
connection scale icon
connection color icon
connection dashed icon
element color icon
element shadow color icon
element bullseye color icon
element border color icon
connection scale icon
connection color icon
connection dashed icon