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.