Learn how to add selector elements that let users control which data series
are displayed in charts, maps, and tables.
Overview
Selector elements allow users to dynamically control which data series (columns) are displayed in visual elements that use Wide Data format. Unlike filters, which control which records (rows) are shown, selectors manage which dataset fields (columns) are visible.
Selectors are particularly useful for:
Allowing users to compare different metrics or time periods
Reducing visual clutter by letting users focus on specific data series
Creating interactive dashboards where users can customize their view
Managing charts with many data series that might be overwhelming when all displayed at once
Selector elements can be displayed as checkboxes, dropdown menus, or legends, and can be connected to multiple charts, maps, and tables simultaneously.
You can add a Selector element to your visualization by selecting Insert in the Toolbar and dragging a Selector onto the canvas. Alternatively, click the Selector icon that appears when hovering on an empty Section.
Tip
Selectors only work with elements that use Wide Data format. If you need
to control which records are displayed from a dataset, use Filter
elements instead.
Setup
In the Setup section, under the Selector tab, you can configure the following options:
Name: Enter the selector's name to identify it in the Layers tab and on the canvas.
Display Style: Select how the selector appears by choosing "Checkbox", "Dropdown", or "Legend."
Margin: Specify the space around the selector element in pixels.
Alignment: Align the selector element to the left, center, or right within its container.
Connecting to Elements
In the Connections section, you can connect your selector to charts, maps, tables, and other elements in your visualization that use Wide Data format.
Select Target Elements to choose which visual elements should be controlled by this selector. When users make selections in the selector, the connected elements will update to show only the selected data series.
A single selector can be connected to multiple elements, but each element can only be connected to one selector at a time. The selector will control the series fields available in all connected elements.
Series Configuration
The selector automatically detects the series fields available in connected elements. You can configure which series should be:
Available: Which data series appear as options in the selector
Default Selection: Which series are selected by default when the visualization first loads
Required: Which series cannot be deselected (always remain visible)
Checkbox Settings
When Display Style is set to "Checkbox", the following options are available:
Layout: Choose between "Vertical" (stacked) or "Horizontal" (side-by-side) arrangement of checkboxes.
Columns: When using horizontal layout, specify how many columns to display the checkboxes in.
Show Select All: Add a "Select All" option that allows users to quickly select or deselect all available series.
Show None: Add a "Select None" option for quickly deselecting all series.
Dropdown Settings
When Display Style is set to "Dropdown", the following options are available:
Placeholder Text: Set the text that appears when no series is selected.
Allow Multiple Selection: Enable users to select multiple data series from the dropdown.
Search: Enable search functionality within the dropdown for easier navigation of long lists of series.
Group Similar: Automatically group related series together in the dropdown.
Legend Settings
When Display Style is set to "Legend", the selector appears as an interactive legend where users can click on legend items to show/hide data series:
Position: Choose where the legend appears relative to connected elements.
Orientation: Select horizontal or vertical layout for legend items.
Symbol Type: Choose the symbol style used in the legend (matches the connected chart type).
Selector elements automatically inherit colors from connected charts and maps, ensuring visual consistency:
Colors are inherited from the first connected element that has color formatting applied.
When displayed as a legend, the selector shows the same colors used in the connected visualizations.
Color inheritance works across different chart types, maintaining consistency even when the same selector controls multiple visualization types.
Advanced Options
In the Advanced section, you can configure additional selector behavior:
Minimum Selection: Set the minimum number of series that must remain selected (prevents users from hiding all data).
Maximum Selection: Set the maximum number of series that can be selected simultaneously.
Persist Selection: Remember user selections when they navigate away and return to the visualization.
Sync Across Pages: When using multiple pages or sections, synchronize selector state across all instances.
Tip
When connecting a selector to multiple elements with different series fields,
the selector will show the union of all available series. Series that don't
exist in a particular element will simply be ignored for that element.
Use Cases
Common use cases for selector elements include:
Time Series Analysis: Allow users to select which years, months, or time periods to compare
Metric Comparison: Let users choose which KPIs or metrics to display simultaneously
Geographic Analysis: Enable selection of specific regions, countries, or locations
Category Filtering: Provide control over which product categories, departments, or segments are shown
Multi-Dataset Views: When charts combine data from multiple sources, let users control which sources are visible