# Filter Chips

{% hint style="success" %}
*Check out the given illustration on Filter Chips component.*
{% endhint %}

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FSDHM9raNKTiNoSzwv2U5%2FFilterchip.gif?alt=media&#x26;token=412b01b0-5c8e-43a0-92ee-4c9bd18db7c0" alt=""><figcaption></figcaption></figure>

The Filter Chips component provides two-way communication between the filter chips component and all associated filters.

Filters that can be associated with Filter chips component: Combo-filter, List Filter, Radio Button, and Hierarchical Filter.&#x20;

{% hint style="info" %}
*<mark style="color:green;">Please Note:</mark> The Filter Chips component supports only Single select and multi-select types with Combo-filter.*
{% endhint %}

## **Default Component Image**

<figure><img src="https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FkI0mNLBRGXVqgB6SQMRO%2Fimage.png?alt=media&#x26;token=558107aa-5749-42ba-b608-a57cb97e1dc0" alt=""><figcaption></figcaption></figure>

## **Properties of the Filer Chips** <a href="#properties-of-the-filer-chips" id="properties-of-the-filer-chips"></a>

### **Background**

* The user can get the reflection of the chart by enabling the shadow option.
* The user can also change the color and increase or decrease the transparency of the shadow.

### **General**

* The user can change the height, width, top, and left.
* If initial visibility is not enabled, then the chart won’t be available for the first preview.
* If ***Show Additional Filter*** is enabled, then the additional button will render the display of extra filter values in the drop-down.
* First, the user needs to make the connection between the filters and the Filter Chips component by connecting them in the ***Associate Chart*** section.

&#x20;    ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2F92PVsEqChwXtI6rRv7Ku%2Fimage.png?alt=media\&token=71524353-a7b1-4404-bb1e-f6391dd75fe7)​

### **Chips Style**

The user can change the background color, and remove the button color, text color, and component background color.

&#x20;    ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FpJfS7vJJQqVov1XS66gK%2Fimage.png?alt=media\&token=0ebf9fcc-8b50-4dae-8c0e-dce3abe7a1ed)​

### **Title**

The user can change the filter chips title, additional button title, and drop-down pop title in this section.

&#x20;    ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FQig3LfwPIRRtWHtTufaP%2Fimage.png?alt=media\&token=e79312bd-5e4f-419c-8765-f120d0e2bee5)​

### **Background**

The user can set the gradient Rotation, opacity, Gradient color, Border, Border Color, Border Radius, Shadow, Shadow Color, and Shadow Transparency using this section.

&#x20;   ![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FfhHguAenzPy7iOAoxPTP%2Fimage.png?alt=media\&token=ec85aafd-60ea-46d8-8486-374beebec1e0)​

### **Style**

The user can set the font size, font color as well as font style-weight-family and text decoration using this section.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FdDFJf1RNCYUDJn6ZtNTF%2Fimage.png?alt=media\&token=69e6fcd8-85ec-4c26-9d64-013fbc7e2a0c)​

## Steps to use the Filter Chips Component <a href="#steps-to-use-the-filter-chips" id="steps-to-use-the-filter-chips"></a>

* Drag the ***Filter chips*** component in a dashboard such that filters are available.
* Click on the ***Associate Filter*** option from the General Properties.
* The ***Associate Filter*** dialog box opens.
* Select the filters to be associated with the filter chips.
* Click the ***Save*** option.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FlSfx7zUWCXEhUALvPbkc%2Fimage.png?alt=media\&token=6a073384-711f-4f24-95a0-7aee98b14f5c)

* Add the required script in the filter chips script pane.
* Drag the label component for updating the filter chip components with selected filters.
* Add the ***sdk.updateFilterChips('filterchips\_ID')*** in label script pane with required connections reload.
* Preview the dashboard.
* Select the filters and click on the label component for triggering the filter chips component.

![](https://859511478-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FXmOXTbkFOB7wyriLgkfc%2Fimage.png?alt=media\&token=175ac949-39b4-45c5-9eb7-752cc25662ef)

Check out a demo video on the Filter Chips component as given below.

{% embed url="<https://youtu.be/ul7-tD0NiLY>" %}
*End-to-end Demo on the Filter Chips Component*
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.bdb.ai/governed-dashboards-4/charts-gallery/other-charts/filter-chips.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.