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.

PreviousExportNextFilter Saver

Last updated