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.

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

• 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