Filter Chips

The Filter Chips component provides a compact, visual way to represent selected filter values in a dashboard. It enables two-way communication between filters and dashboard components, ensuring that when a user applies filters, the selected values are displayed as interactive chips.

Supported filters include:

  • Combo Filter (Single-select and Multi-select)

  • List Filter

  • Radio Button

  • Hierarchical Filter

This component improves usability by allowing users to view and remove applied filters directly from the chips.

Best Situations to Use

Use Filter Chips when you want to:

  • Display active filters in a clean, user-friendly manner.

  • Provide users with the ability to easily remove or modify filters.

  • Improve dashboard clarity by showing which filters are applied at any given time.

  • Integrate multiple filter types into a single, unified interface.

Not Recommended for:

  • Dashboards with only one filter where chips add no real benefit.

  • Scenarios requiring complex, hierarchical filter visualization beyond single/multi-selection.

Properties

Background

  • Shadow: Enable/disable shadow effect.

  • Shadow Color: Select shadow hue.

  • Shadow Transparency: Adjust shadow opacity.

General

  • Component Name: Assign a unique identifier.

  • Left / Top: Position the component on the dashboard canvas.

  • Height / Width: Define component size.

  • Initial Visibility: Toggle whether the component is displayed on first preview.

  • Show Additional Filter: Enables a button to display additional filter values in a drop-down.

  • Associate Chart: Connect Filter Chips to relevant filters (Combo, List, Radio Button, Hierarchical).

Chips Style

  • Background Color: Set the chip’s background.

  • Button Color: Customize the remove button color.

  • Text Color: Define text color of chip labels.

  • Component Background Color: Set the overall background color.

Title

  • Customize:

    • Filter Chips Title

    • Additional Button Title

    • Drop-down Pop Title

Advanced Background

  • Gradient Rotation: Define gradient angle (0–360°).

  • Opacity: Adjust transparency (0–1).

  • Gradient Color: Select gradient blend.

  • Border / Border Color / Border Radius: Customize border styling.

  • Shadow / Shadow Color / Shadow Transparency: Fine-tune shadow details.

Style

  • Font Size / Color: Control chip label readability.

  • Font Style / Weight / Family: Apply typographic customizations.

  • Text Decoration: Add underline or other emphasis styles.

Steps to Use the Filter Chips Component

  1. Drag and Drop the Filter Chips component onto the dashboard.

  2. Ensure the required filters are available on the dashboard.

  3. From General Properties, open the Associate Filter option.

  4. In the dialog box, select the filters to link with Filter Chips.

  5. Click Save to confirm associations.

  6. Add the required script in the Filter Chips script pane.

  7. Drag a Label component onto the dashboard to trigger updates.

  8. In the label script pane, add:

    sdk.updateFilterChips('filterchips_ID');

    (Replace filterchips_ID with the actual component ID.)

  9. Reload the dashboard and preview.

  10. Apply filters → Click the label → View updated Filter Chips display.

Demo

For a full walkthrough, check out the demo video showcasing end-to-end usage of the Filter Chips component, including filter associations and live updates.

Notes

  • Works best in dashboards with multiple filters applied.

  • Combine with Show Additional Filter for dashboards with many filter values.

  • Always test in Preview mode to ensure filter-to-chip associations work correctly.

PreviousExportNextFilter Saver