Adding a legend

Contents[Hide]

1. Overview

A legend automatically provides a key to the colors used by other data visualization (DV) controls such as charts and maps.

Simply connect one or more data visualization controls to a legend and it will automatically display a table of colors and descriptions to help users understand what is being displayed.

Related video: Using a Legend

2. Elements of a legend

The figure below shows the main elements of a legend control. By default, the background of a legend is transparent, and no border is visible.

Elements of a legend
Elements of a legend

3. Add a legend for a chart

As an example, consider a metric set configured as follows:

  • MEASURES: OrderQty
  • ROWS: OrderDate
  • COLUMNS: Product hierarchy

When this metric set is added to a dashboard, a bar chart appears which shows multiple bar series. Each bar series (same colored bars) corresponds to a different product category such as Bikes or Accessories.

A bar chart without any legend
A bar chart without any legend

In the figure above, you'll notice that the bar chart displays the name of each product category for the first set of data points. This is the default behavior for the chart when there is no legend attached.

To connect a legend to this chart, click on the part of the canvas outside of any controls. Go to the toolbar, click Data Visualization, and then click Legend from the dropdown menu (you may need to scroll to the right).

Add a legend from the toolbar
Add a legend from the toolbar

You'll see a popup panel asking you to choose one or more data visualization controls to associate with the legend. In this example, there is just one chart so just select its checkbox and then click the (X) in the top-right to close the panel.

Connect the legend to the chart
Connect the legend to the chart

The legend now displays items corresponding to the chart. You can reposition or resize the legend as you like (scrollbars will appear as needed).

Bar chart with associated legend
Bar chart with associated legend

Notice that the bar chart no longer displays the product category names for the first set of data points. This is because the chart is now connected to a legend which conveys the same information in a better way.

Select the bar chart and go to the Properties window. Scroll down and look for the Legend property under OPTIONS. You'll see that it is set with the name of the target legend.

Bar chart has a Legend property
Bar chart has a Legend property

Chart visualizations have additional legend-related properties on a chart series.

The Display In Legend property determines whether auto-generated legend items should be displayed for this chart series.

The Legend Text property determines the text for each auto-generated legend item. By default, it contains a placeholder keyword identifying the hierarchy member (for example) that should be displayed. You can edit this value and insert some additional text which will be reflected in the legend items.

Use the Legend Category property to set the text for a category heading which will appear above the auto-generated legend items for this chart series.

Legend-related properties for a chart series
Legend-related properties for a chart series

5. Legend data bindings

Right-click (or long-tap) on the bar chart to open its Data Binding Panel. Click Bindings in the top-right, and then scroll down to find the legend-related bindings for the chart series.

Legend-related data bindings for a chart series
Legend-related data bindings for a chart series

6. Category headings

Multiple data visualization controls can be connected to a single legend control on the canvas. For example, two charts can have the Legend property point to the same legend. In this case, some of the items in the legend correspond to one chart, while the remaining items correspond to the second chart. To help group or separate legend items, you can use category headings.

As an example, add a second metric set to the dashboard as shown below.

Add a second chart (metric set)
Add a second chart (metric set)

To connect this second chart to the same legend, right-click (or long-tap) on the legend and select Bind Legend from the menu.

Click Bind Legend
Click Bind Legend

Select the checkbox for the second chart.

Bind the second chart to the legend
Bind the second chart to the legend

Two legend items corresponding to the second chart are automatically appended to the existing legend (LineTotal and LineTotal AVG Expression).

Two new items are appended to the legend
Two new items are appended to the legend

Since legend items from both charts are grouped together, it's not easy to see which items correspond to which chart.

To address this with category headings, select the first chart, go to its properties, edit Series 1, and then set its Legend Category property to Product Categories.

Set the category heading for the first chart
Set the category heading for the first chart

The category heading appears in the legend just above the legend items corresponding to the first chart. The remaining legend items are grouped under the Uncategorized heading. To fix this, go to the properties for the second chart, edit each series in turn and set its Legend Category property in a similar way as the first chart. Both series of the second chart (LineTotal and Average) must have the legend category set to the same text value.

Finally, select the legend and go to its properties to change the appearance or layout of the category headings. For example, align the headings on the left and set the font weight to bold.

Set the appearance of the category headings
Set the appearance of the category headings

7. Custom legend items

From the Main properties of a legend, you can add one or more custom legend items which appear in addition to the auto-generated ones.

Custom legend items
Custom legend items

Each custom legend item can have its own Marker Symbol and Marker Fill color.

Custom legend item appearance
Custom legend item appearance

8. Legend item checkboxes

Use the legend's Script Checkboxes Visible property (under Look \ ITEM) to show a checkbox beside each legend item.

Enable legend item checkboxes
Enable legend item checkboxes

A typical use for checkboxes is to allow the user to show or hide a chart series just by clicking on the corresponding legend item checkbox. Below are some example steps for setting this up using scripting and custom legend items.

  1. Add a chart to the canvas that displays two measures (e.g., LineTotal and OrderQty).
  2. Add a legend to the canvas but don't bind it to the chart.
  3. Add two custom legend items, name them according to the measure names, and configure the appearance of each marker to match the corresponding chart series.
  4. Set the legend's Script Checkboxes Visible property to true.
  5. Under the legend's Main properties, expand the Item Check Changed action and add a script.
  6. In the Script Editor, enter the script below.
var item = e.originalEvent.legendItem;
if (item.text == "LineTotal") {   
    chart1.control.series[0].isVisible = item.isCheckboxChecked;    
} else if (item.text == "OrderQty") {
    chart1.control.series[1].isVisible = item.isCheckboxChecked;
}

 You can now view the dashboard and click on the legend item checkboxes to show or hide the corresponding series.

Script to show or hide chart series on Item Check Changed action
Script to show or hide chart series on Item Check Changed action

9. Legend data brushing

The legend control supports automatic data brushing as follows:

  • Hover over (or tap) a chart data point or table cell to automatically highlight the corresponding legend item marker.
  • Hover over (or tap) a legend item to automatically highlight the corresponding data in a chart or table.

Hover over a legend item to brush corresponding data in a chart or table
Hover over a legend item to brush corresponding data in a chart or table

10. Notes

10.1. Color and size rules

Color rules and size rules for map, chart, table, and treemap visualizations also have a Display In Legend property which lets you control whether legend items should be displayed for the data ranges generated by color/size rules. Color rules include auto range, range, and discrete rules. See Displaying symbols on a map for an example of legend items generated from color and size rules.

Display in Legend property for a map color rule
Display in Legend property for a map color rule

11. See also

 

Dundas Data Visualization, Inc.
500-250 Ferrand Drive
Toronto, ON, Canada
M3C 3G8

North America: 1.800.463.1492
International: 1.416.467.5100

Dundas Support Hours: 7am-6pm, ET, Mon-Fri