Linked Views & Crossfilter

Linked Views coordinate a group of charts without manual event wiring. In highlight mode, brushing one chart dims the non-matching marks in the others with no redraw. Switch on the crossfilter engine and clicking or brushing one chart re-aggregates every other chart over the filtered subset.

Enable the feature

import ApexCharts from 'apexcharts'
import 'apexcharts/features/link'

All coordinated charts share a chart.group name. See the chart.link options for every field.

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 you 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.