Make a custom chart interactive

Custom charts can have the same interactions as Holistics's built-in charts, such as:

You enable this in two steps. First, you declare the interactions your chart accepts. Then you wire those interactions to Holistics features. This guide walks you through both.

How interactions work

Interactions come from two parts of the chart template:

Selections declare what a user can do, such as clicking a data point or dragging to select a range. You define them with Vega-Lite params. Vega-Lite calls a selection a signal.
holisticsConfig wires those selections to Holistics features. Two fields matter:
- crossFilterSignals: selections that trigger Cross Filter.
- contextMenuSignals: selections that open the context menu (Date-drill, Drill-through).

For the full property reference, see holisticsConfig and params. If you are new to chart templates, start with Understand Custom Chart.

Selection types

A selection is either point-based or interval-based.

Point selection (click). A point selection fires when a user clicks a single value (left click), or selects several values (hold Shift and left click). To deselect, the user clicks a selected value again. Read more in the Vega-Lite selection docs.

Point selection highlighting a value on a bar chart

Interval selection (drag). An interval selection fires when a user holds left click and drags across a range of values. To deselect, the user double-clicks anywhere on the chart.

Interaction examples

Each example below starts from a working chart and adds one interaction. The full, copy-ready code for each one lives in the Custom Chart Library.

Highlight selected columns on point selection

Outcome. When a user selects one or more columns, those columns stay fully visible while the rest fade out. On hover, a stroke outlines the column.

In your template, declare two point selections in params: one that fires on click, and one that fires on hover.

template: @vgl {
  ...
  "params": [
    // effective only while the user hovers
    { "name": "pointSelectionOnMouseOver", "select": {"type": "point", "on": "mouseover"} },
    // effective when the user clicks
    { "name": "normalPointSelection", "select": "point" }
  ]
  ...
}

Add a fillOpacity rule so selected columns keep full opacity while the rest fade.

template: @vgl {
  ...
  "mark": {
    "fill": "#484848"   // base color of the columns
  },
  "encoding": {
    "fillOpacity": {
      // selected columns stay fully visible
      "condition": {"param": "normalPointSelection", "value": 1},
      // unselected columns fade to 30%
      "value": 0.3
    }
  }
  ...
}

Try it. Click a single column, then select a range by holding Shift and clicking. The selected columns should stay highlighted.

Add a strokeWidth rule so hovered columns get a light stroke and selected columns get a bolder one.

template: @vgl {
  ...
  "mark": {
    "fill": "#484848",
    "stroke": "black"   // stroke color
  },
  "encoding": {
    "strokeWidth": {
      "condition": [
        // bolder stroke (2) on selected columns
        { "param": "normalPointSelection", "empty": false, "value": 2 },
        // light stroke (1) on hovered columns
        { "param": "pointSelectionOnMouseOver", "empty": false, "value": 1 }
      ],
      "value": 0   // no stroke by default
    }
  }
  ...
}

Try selecting and hovering again. You should see a light stroke on hovered columns and a bolder stroke on selected ones.

Full code example: Highlight stroke effect on point selection.

Cross-filter on point selection

What is Cross Filter?

Cross Filter creates shared filters that apply to all report widgets in your dashboard. To learn more, see Cross Filter.

Outcome. When a user selects data on your chart, a cross filter for that selection is applied to every widget in the dashboard.

Prerequisite: a chart with a point selection declared. The highlight example above is a good starting point.

In your template, declare a point selection in params.

template: @vgl {
  ...
  "params": [
    // effective when the user clicks
    { "name": "normalPointSelection", "select": "point" }
  ]
  ...
}

Add a holisticsConfig field with crossFilterSignals, and list the point selection from step 1.

template: @vgl {
  ...
  "holisticsConfig": {
    "crossFilterSignals": ["normalPointSelection"]
  }
  ...
}

Try it. Click a single column, or select a range with Shift and click. A cross filter should be created and applied to the other reports in your dashboard.

Full code example: Cross Filter on point selection.

Cross-filter on interval selection

Outcome. When a user drags to select an interval on your chart, a cross filter for that range is applied to every widget in the dashboard.

Prerequisite: a working custom chart you can add a selection to.

In your template, declare an interval selection in params.

template: @vgl {
  ...
  "params": [
    {
      "name": "intervalSelection",
      "select": {"type": "interval", "encodings": ["x"]}
    }
  ]
  ...
}

Add a holisticsConfig field with crossFilterSignals, and list the interval selection from step 1.

template: @vgl {
  ...
  "holisticsConfig": {
    "crossFilterSignals": ["intervalSelection"]
  }
  ...
}

Try it. Hold left click and drag across a range of values. A cross filter should be created and applied to the other reports in your dashboard.

Full code example: Cross Filter on interval selection.

Cross-filter all sub-charts in a combo chart

Outcome. A selection on a combo (mixed) chart applies the cross filter to every sub-chart in the layer, not just the one the user interacted with.

Prerequisite: a combo chart built with a Vega-Lite layer. See Cross Filter on sub-charts in a combo chart for how to build one.

In your template, find the sub-chart in the layer array that the cross filter should also apply to.

template: @vgl {
  ...
  "layer": [
    // your bar chart definition
    { ... },
    // your line chart definition (the one we'll filter)
    { ... }
  ]
  ...
}

Add a transform to that sub-chart with a filter that takes the user's selection as its param.

template: @vgl {
  ...
  "layer": [
    { ... },   // your bar chart definition
    {
      "transform": [
        // filter this sub-chart by the user's interval selection
        { "filter": {"param": "intervalSelection"} }
      ]
      // ...the rest of the sub-chart definition
    }
  ]
  ...
}

Create a cross filter on your dashboard and confirm the sub-chart updates along with the rest.

Full code example: Cross Filter on sub-charts in a combo chart.

Drill-through on point selection

Outcome. When a user clicks a data point, the Holistics context menu opens so they can Date-drill or Drill-through, just like on a built-in chart.

Prerequisite: a chart with a point selection declared (see the cross-filter example).

In your template, declare a point selection in params.

template: @vgl {
  ...
  "params": [
    { "name": "normalPointSelection", "select": "point" }
  ]
  ...
}

Add a holisticsConfig field with contextMenuSignals, and list the point selection from step 1.

template: @vgl {
  ...
  "holisticsConfig": {
    "contextMenuSignals": ["normalPointSelection"]
  }
  ...
}

Try it. Click a data point and the context menu should appear, with options to Date-drill and Drill-through.

A selection can drive both features at once. List it in crossFilterSignals and contextMenuSignals to have the same click cross-filter the dashboard and open the context menu. For the full property reference, see holisticsConfig.

How interactions work​

Selection types​

Interaction examples​

Highlight selected columns on point selection​

Cross-filter on point selection​

Cross-filter on interval selection​

Cross-filter all sub-charts in a combo chart​

Drill-through on point selection​