# 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:

   ```javascript
   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.