Filter Chips

Check out the given illustration on Filter Chips component.

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.

Please Note: The Filter Chips component supports only Single select and multi-select types with Combo-filter.

Default Component Image

Properties of the Filer Chips

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.

​

Chips Style

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

​

Title

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

​

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.

​

Style

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

​

Steps to use the Filter Chips Component

• 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.

• 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.

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

End-to-end Demo on the Filter Chips Component