Legends

Learn how to create and configure legend elements that help users understand the meaning of colors, symbols, and patterns in your visualizations.

Overview

Legend elements provide essential context for your visualizations by explaining what different colors, symbols, sizes, or patterns represent. They act as a key that helps users interpret the visual encoding used in charts, maps, and other data visualizations.

Legends are particularly important when:

• Using color coding to represent different categories or values
• Displaying multiple data series with different visual attributes
• Showing geographic data with various symbols or fill patterns
• Creating complex visualizations with multiple encoding dimensions

You can add a Legend element to your visualization by selecting Insert in the Toolbar and dragging a Legend onto the canvas. Legends can also be automatically generated by connected charts and maps.

Setup

In the Setup section, under the Legend tab, you can configure the following options:

• Name: Enter the legend's name to identify it in the Layers tab and on the canvas.
• Legend Type: Choose between "Color", "Symbol", "Size", or "Pattern" legends.
• Orientation: Select horizontal or vertical layout for legend items.
• Margin: Specify the space around the legend element in pixels.
• Alignment: Align the legend within its container.

Connecting to Visual Elements

In the Connections section, you can connect your legend to charts, maps, and other visual elements:

• Target Elements: Select which visualizations the legend should represent
• Auto-Generate: Automatically create legend items based on the connected element's encoding
• Sync Colors: Ensure legend colors match those used in connected visualizations
• Update Dynamically: Automatically update the legend when connected elements change

Color Legends

When Legend Type is set to "Color", the legend explains what different colors represent:

• Color Scale: For continuous data, show a gradient scale with value labels
• Color Categories: For categorical data, show discrete color swatches with labels
• Color Mapping: Define custom color-to-value mappings
• Value Formatting: Control how numeric values are displayed in the legend

Symbol Legends

When Legend Type is set to "Symbol", the legend explains what different symbols or shapes represent:

• Symbol Library: Choose from various symbol types (circles, squares, triangles, etc.)
• Symbol Size: Control the size of symbols in the legend
• Symbol Mapping: Define what each symbol represents
• Custom Symbols: Upload custom icons or symbols for specific categories

Size Legends

When Legend Type is set to "Size", the legend explains how size encoding works in your visualization:

• Size Scale: Show a range of sizes with corresponding value labels
• Size Mapping: Define the relationship between data values and visual size
• Reference Sizes: Provide specific size examples for key data points
• Proportional Scaling: Show how size relates proportionally to data values

Pattern Legends

When Legend Type is set to "Pattern", the legend explains different fill patterns or textures:

• Pattern Library: Choose from various pattern types (stripes, dots, crosshatch, etc.)
• Pattern Mapping: Define what each pattern represents
• Pattern Density: Control the density or intensity of patterns
• Accessibility: Ensure patterns are distinguishable for colorblind users

Styling Options

Customize the visual appearance of your legend:

• Title: Add a title to explain what the legend represents
• Item Spacing: Control spacing between legend items
• Text Formatting: Customize font size, color, and style for legend labels
• Border and Background: Add visual separation with borders or background colors
• Responsive Layout: Configure how the legend adapts to different screen sizes

Interactive Features

Make your legends interactive to enhance user experience:

• Clickable Items: Allow users to click legend items to filter or highlight data
• Hover Effects: Show additional information when users hover over legend items
• Toggle Visibility: Let users show/hide data series by clicking legend items
• Zoom to Data: Click legend items to zoom to relevant data on maps

Position and Layout

Control where and how your legend appears:

• Position: Place legends above, below, left, or right of connected visualizations
• Floating: Create floating legends that can be positioned anywhere
• Responsive Positioning: Automatically adjust legend position based on screen size
• Multi-Column Layout: Arrange legend items in multiple columns for space efficiency

Advanced Configuration

• Conditional Display: Show or hide legend items based on data availability
• Custom Labels: Override automatic labels with custom text
• Value Ranges: Group continuous values into ranges for cleaner display
• Hierarchical Legends: Create nested legends for complex categorizations

Integration with Filters and Selectors

Legends can work together with other interactive elements:

• Filter Integration: Legends can inherit colors from connected filter elements
• Selector Compatibility: Use legends as selector elements to control data series visibility
• Dynamic Updates: Legends automatically update when filters or selectors change the displayed data

Best Practices

• Keep It Simple: Don't overcrowd legends with too many items
• Logical Ordering: Arrange legend items in a logical order (alphabetical, by value, etc.)
• Clear Labels: Use descriptive, concise labels that clearly explain what each item represents
• Consistent Styling: Maintain consistent visual style with the rest of your visualization
• Accessibility: Ensure legends are readable and usable by all users, including those with disabilities