Filtering

Brush selection

Add brush to a chart panel when readers should select a range by dragging across an axis, like a date window, instead of using a separate filter control.

Daily orders

Mar 4 – Mar 18

What you can do

brush is a panel property, not an action: mode, loParam, hiParam, valueType, and targets.
The reader drags across an axis to select a range; the two bounds are written to loParam and hiParam.
mode picks the axis, x or y; valueType is number or date.
targets is all or a list of panel ids that re-query once the range is set.
Brush selection is one-dimensional only; it does not support a rectangular 2D region.

A property on chart panels with a continuous axis; not applicable to table, kpi, stat, filter, or layout panels.

Spec

View spec

[
  {
    "id": "daily-revenue",
    "type": "chart:line",
    "title": "Daily revenue",
    "data": {
      "query": "SELECT order_date, SUM(amount) AS revenue FROM orders GROUP BY 1 ORDER BY 1"
    },
    "spec": {
      "categoryField": "order_date",
      "valueField": "revenue"
    },
    "brush": {
      "mode": "x",
      "loParam": "order_date_lo",
      "hiParam": "order_date_hi",
      "valueType": "date",
      "targets": "all"
    }
  },
  {
    "id": "revenue-by-category-window",
    "type": "chart:bar",
    "title": "Revenue by category (selected window)",
    "data": {
      "query": "SELECT category, SUM(amount) AS revenue FROM orders WHERE order_date BETWEEN %(order_date_lo)s AND %(order_date_hi)s GROUP BY 1",
      "params": {
        "order_date_lo": null,
        "order_date_hi": null
      }
    },
    "spec": {
      "categoryField": "category",
      "valueField": "revenue"
    }
  }
]

Dragging across daily-revenue's x-axis writes order_date_lo and order_date_hi, and the second panel re-queries within that window.

Try it live

Open the pipeline-control-room template in the Builder

Open pipeline-control-room and drag across the x-axis of cr-intake to select a date range.

Build it in dvt

Every interaction on this site is a few lines of the same declarative JSON spec. Read the full spec format, or connect an AI agent to your warehouse and build one live in the quickstart.

Follow the build

dvt is in founding research. Leave your email and we'll reach out when there's something to see — no newsletters, no noise.