Kibana Vega-Lite Dropdown Filter Example with params and bind

Maryam Alavi
Name
Maryam Alavi

Updated on

If you are landing here from searches like kibana vega-lite params bind select dropdown or kibana vega-lite params bind input select, the core pattern is simple: define a parameter, bind it to input: "select", and use that parameter in a filter expression.

This article focuses on the long-tail use case Google is most likely to test on this topic: a Kibana Vega-Lite panel with a dropdown that filters the chart without sending users to a broader reference page.

For the generic Vega-Lite reference page, see Vega-Lite Bind Select Dropdown Example for Parameters.

When this pattern works well

Use this approach when you want:

  • A dropdown inside a Vega-Lite visualization.
  • A small list of known filter values.
  • Filtering applied after Kibana loads the data for the panel.

Use a different approach when you need:

  • Dropdown options generated dynamically from query results.
  • Conditional Elasticsearch queries driven by the selected value.
  • Dashboard-level controls shared across many panels.

Kibana version caveat

Interactive controls in Vega-Lite are a better fit in newer Kibana versions. Elastic documentation and community guidance indicate older Kibana releases had more limited support for interactive Vega-Lite controls, especially before Kibana 7.13. If you are working on an older stack, verify the behavior in your exact version before treating this as production-ready.

Live Vega-Lite example

The live demo below shows the same interaction pattern as the Kibana version. The chart filters points by the selected origin through a bound dropdown.

Kibana Vega-Lite dropdown filter example

Kibana accepts Vega-Lite specs in HJSON, so the example below is written in the format most Kibana users actually paste into the editor:

{
  $schema: https://vega.github.io/schema/vega-lite/v5.json
  title: "Orders by category"
 
  data: {
    url: {
      %context%: true
      %timefield%: order_date
      index: kibana_sample_data_ecommerce
      body: {
        aggs: {
          categories: {
            terms: {
              field: category.keyword
              size: 10
            }
          }
        }
        size: 0
      }
    }
    format: { property: "aggregations.categories.buckets" }
  }
 
  params: [
    {
      name: category
      value: "Men's Clothing"
      bind: {
        input: select
        options: [
          "Men's Clothing"
          "Women's Clothing"
          "Shoes"
          "Accessories"
        ]
      }
    }
  ]
 
  transform: [
    { filter: "datum.key == category" }
  ]
 
  mark: bar
 
  encoding: {
    x: {
      field: key
      type: nominal
      title: "Category"
    }
    y: {
      field: doc_count
      type: quantitative
      title: "Orders"
    }
    tooltip: [
      { field: key, type: nominal, title: "Category" }
      { field: doc_count, type: quantitative, title: "Orders" }
    ]
  }
}

How the spec works

1. params defines the dropdown state

The parameter named category stores the selected value. bind: { input: select, options: [...] } tells Vega-Lite to render a dropdown control.

2. transform applies the selected value

The filter expression datum.key == category compares each row in the aggregated data with the selected dropdown value.

3. Kibana loads data first, then Vega-Lite filters it

This is the important architectural constraint. Kibana resolves the Elasticsearch request before Vega-Lite renders the panel, so the dropdown filters the loaded result set rather than rewriting the Elasticsearch query on every change.

Common pitfalls

The dropdown renders, but nothing changes

Check the field name used in the filter. In the example above the aggregated bucket label is key, so the filter must compare against datum.key, not datum.category.

The dropdown values do not match the data

The values in bind.options must exactly match the values in the rendered data. If your aggregation returns Men's Clothing, but your dropdown option is Mens Clothing, the filter will return no rows.

You want dropdown options from query results

This is where many Kibana users hit a wall. Vega-Lite bind.options is still a static list in the spec. If your dropdown values need to come from live data, use one of these options instead:

  • Generate the spec server-side or in your app with the option list already filled in.
  • Use Kibana dashboard controls for shared filters.
  • Move to Vega when you need more custom control logic.

You are on an older Kibana release

If you are below the Vega-Lite support level that Kibana uses for interactive controls, the syntax may parse but the interaction may not behave as expected. Test the smallest possible spec first.

What to do next

This is the highest-ROI version of the topic for search because it matches a concrete intent: people are not looking for a broad explanation of parameter binding, they are trying to get a Kibana dropdown working.