Skip to main content

filterControls

Type: object
Default:

{
  category: {
    enabled: false,
    multiSelect: true,
    zoomOnSelect: false,
    sortBy: 'price'
  },
  price: {
    enabled: false
  },
  accessibility: {
    enabled: true
  }
}

Parameters that aren't passed will use their default values instead.

Supported parameters are:

  • category.enabled - Default: false. If true, the category filter will be visible.
  • category.multiSelect - Default: true. If true, multiple categories can be selected at once.
  • category.zoomOnSelect - Default: false. If true, the chart will zoom in or out to fit in the viewport the filtered objects.
  • category.sortBy - Default: 'price'. By default, categories are sorted by price from lowest to highest. All sort options are:
    • 'price': Default Sorted by price from lowest to highest
    • 'priceDescending': Sorted by price from highest to lowest
    • 'name': Sorted alphabetically by category name
    • 'none': Lists categories in the order they are defined in the chart designer
  • price.enabled - Default: false. If true, the price filter will be visible.
  • accessibility.enabled - Default: true. If true, the accessibility filter will be visible.

category.enabled and price.enabled cannot be used together.

To filter the chart using the config, use filters. When filters overlap with filterControls, the UI component will not be shown, i.e., filters.price.(min|max) and filterControls.price.enabled are incompatible.

The price filter​

The price filter lets ticket buyers narrow the chart down to what they want to spend. Places priced outside the range are greyed out. A chart with no prices shows no filter.

Requires the new renderer UI

The price filter only works with the new renderer UI. You need to enable the feature flag first.

The accessibility filter​

The accessibility filter lets ticket buyers narrow the map to the seats that match their needs, such as accessible, semi-ambulatory or hearing-impaired seats. Aisle seats can be filtered on here too, but only when the chart has at least one. A chart with no accessibility attributes at all shows no filter.

Replacing the old keys​

filterControls.category replaces categoryFilter, and filterControls.accessibility replaces showAccessibilityFilter. When an old key and its filterControls counterpart are both passed, the old key is ignored.