> For the complete documentation index, see [llms.txt](https://docs.bdb.ai/7.6/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/7.6/data-visualization/governed-dashboards/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://4128708524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FSDHM9raNKTiNoSzwv2U5%2FFilterchip.gif?alt=media&amp;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.

#### Default Component Image:

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

### **Properties of the Filer Chips:**

* **Background**&#x20;
  * The user can get the reflection of the chart by enabling the shadow option.&#x20;
  * The user can also change the color and increase or decrease the transparency of the shadow.
* **General:**&#x20;

  * 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://4128708524-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://4128708524-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://4128708524-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://4128708524-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.&#x20;

&#x20;     ![](https://4128708524-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

* 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.  &#x20;

<figure><img src="https://4128708524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FlSfx7zUWCXEhUALvPbkc%2Fimage.png?alt=media&amp;token=6a073384-711f-4f24-95a0-7aee98b14f5c" alt=""><figcaption></figcaption></figure>

* 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.&#x20;
* Select the filters and click on the label component for triggering the filter chips component.   &#x20;

<figure><img src="https://4128708524-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGDmsjfjJBNqow7Fo97cO%2Fuploads%2FXmOXTbkFOB7wyriLgkfc%2Fimage.png?alt=media&amp;token=175ac949-39b4-45c5-9eb7-752cc25662ef" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
Check out a demo video on the Filter Chips component as given below.
{% endhint %}

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