Linked Views & Crossfilter

Building a dashboard where clicking one chart filters the others usually means wiring click and selection handlers by hand, re-querying your data, and calling updateSeries on every other chart. Linked Views does that coordination for you. Charts that share a chart.group name talk to each other automatically, and you choose how tightly they are coupled.

There are two levels. Highlight is the light touch: brushing or hovering one chart dims the non-matching marks in the others, with no redraw, so a set of small multiples reads as one connected view. Crossfilter is the full engine: clicking a bar or brushing a range in one chart re-aggregates every other chart over the filtered subset of the shared data, the way a pivot dashboard does, and you never write a handler.

See it live

The dashboard below is a single crossfilter group. Click a category, brush a range, or select a cell, and every other chart re-aggregates over what is left. Press Reset all filters to clear.

For the design behind coordinated groups and a full dashboard build, see Coordinated Dashboards: Linked Views and Crossfilter.

Where it is useful

• Interactive dashboards. Click a region, a quarter, or a category in one chart and let the rest of the page filter to match, without per-chart wiring.
• Faceted exploration. Combine a categorical filter, a numeric range brush, and a heatmap matrix over one dataset so users can slice from several angles at once.
• Connected small multiples. Use highlight mode to visually tie together charts that already share data, so hovering one series lights up the same series everywhere.
• Replacing hand-wired coordination. Anywhere you were maintaining click handlers that re-query and re-render sibling charts, the crossfilter engine is the declarative replacement.

Highlight mode

The lightest form: charts in the same group dim their non-matching marks when you brush any member. It needs chart.selection.enabled for range brushing and never redraws.

const options = {
  chart: {
    group: 'sales',
    link: { enabled: true, mode: 'highlight', dimOpacity: 0.2 },
  },
}

Crossfilter mode

A real crossfilter engine drives categorical click-filters, range brushes, a shared data table, and a 2D heatmap matrix. Register the shared records once, then each chart declares a dimension and a reduce:

import 'apexcharts/features/link'

// register the shared record set
const cf = ApexCharts.crossfilter({ id: 'sales', records })

// each participating chart, in its options:
const byQuarter = {
  chart: {
    link: {
      enabled: true,
      id: 'sales',
      dimension: (row) => row.quarter, // presence of `dimension` selects filter mode
      reduce: 'count',
    },
  },
}

Clicking a bucket in one chart re-aggregates the others over the filtered rows. ApexCharts.getCrossfilter(id) returns the engine, and chart.clearCrossfilter() resets the active filter.

Bucket types

The bucket kind is inferred, or set link.type explicitly:

category	One bucket per distinct key (default for a categorical dimension).
range	Numeric bins; selected when link.bins is present.
matrix	2D cross-tab for a heatmap; the dimension returns [xKey, yKey].

When to use it

Use highlight mode to visually connect small multiples that already share data. Use the crossfilter engine for an interactive dashboard where clicking one chart should filter the rest, without wiring click handlers and re-querying by hand. Try the Crossfilter dashboard demo.

Linked Views ships as a tree-shakeable entry point; see the tree-shaking guide.