> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/governed-dashboards-4/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bdb.ai/governed-dashboards-4/charts-gallery/other-charts/filter-chips.md).

# 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 %}