Data selection

Select chart observations without changing the source data. This feature belongs to @revolist/charts and can be used without Pivot or a grid.

To select an interval on an axis by dragging a band or handles, use Axis range selection. This page covers selecting individual data marks.

Try it live

Click a data mark, then inspect the selected targets below. This example uses multiple selection. Use Ctrl/Meta-click to add or toggle individual targets in multiple mode, or choose Clear selection.

Selection uses stable row/column members and measure identity. It is different from the drawing toolbar’s Select pointer, which edits annotation shapes.

Clear selection

Loading chart…

Inspect live chart state

The chart uses the native Charts renderer. Buttons outside the plot are example application controls calling the public API.

Complete chart setup with sample data

Install Charts using the installation guide, then run this setup after the host mounts. The data is illustrative. Additional actions for this tool are explained below.

<div id="chart" style="width:100%;height:500px"></div>

import { createChartFactory } from '@revolist/charts/core';
import { lineChart } from '@revolist/charts/line';
import { groupedColumnChart } from '@revolist/charts/grouped-column';
import { columnLineChart } from '@revolist/charts/column-line';

const rows = [
  {
    "date": 1767225600000,
    "month": "Jan",
    "revenue": 65,
    "costs": 45
  },
  {
    "date": 1769904000000,
    "month": "Feb",
    "revenue": 82,
    "costs": 50
  },
  {
    "date": 1772323200000,
    "month": "Mar",
    "revenue": 76,
    "costs": 48
  },
  {
    "date": 1775001600000,
    "month": "Apr",
    "revenue": 95,
    "costs": 65
  },
  {
    "date": 1777593600000,
    "month": "May",
    "revenue": 110,
    "costs": 72
  },
  {
    "date": 1780272000000,
    "month": "Jun",
    "revenue": 102,
    "costs": 68
  },
  {
    "date": 1782864000000,
    "month": "Jul",
    "revenue": 121,
    "costs": 80
  },
  {
    "date": 1785542400000,
    "month": "Aug",
    "revenue": 115,
    "costs": 76
  },
  {
    "date": 1788220800000,
    "month": "Sep",
    "revenue": 135,
    "costs": 89
  },
  {
    "date": 1790812800000,
    "month": "Oct",
    "revenue": 128,
    "costs": 85
  },
  {
    "date": 1793491200000,
    "month": "Nov",
    "revenue": 145,
    "costs": 92
  },
  {
    "date": 1796083200000,
    "month": "Dec",
    "revenue": 155,
    "costs": 100
  }
];
const mapping = {
  "category": {
    "field": "date",
    "label": "month"
  },
  "series": [
    {
      "field": "revenue",
      "label": "Revenue"
    },
    {
      "field": "costs",
      "label": "Costs"
    }
  ]
};
const createChart = createChartFactory([lineChart, groupedColumnChart, columnLineChart]);
const container = document.getElementById('chart')!;
const chart = await createChart({
  container,
  data: rows,
  mapping,
  "chartType": "line",
  "axes": {
    "x": {
      "scale": "time"
    }
  },
  "presentation": {
    "title": "Monthly performance",
    "subtitle": "Illustrative data · 2026",
    "legendPosition": "bottom"
  },
  "interaction": {
    "mode": "select",
    "selectionMode": "multiple"
  }
});

// When the host unmounts:
// chart.destroy();

API and configuration

await chart.update({ interaction: {
  mode: 'select', selectionMode: 'multiple',
} });
const stop = chart.subscribe(model => console.log(model.selection));
await chart.clearSelection();
// You can also await chart.setSelection(validSemanticTargets).
// Later: stop();

Support and behavior

The type and backend must support select interaction. Standalone Charts maintains local selection; Pivot’s drill and grid-filter adapters are separate. A local selection does not change source rows or a remote query. Saved models include committed selection.

State and cleanup

Authored settings are available through chart.model. Updates replace whole settings objects: spread fields you want to retain, and await the returned promise before reading state or exporting. Destroy the controller when its host unmounts.

All chart tools · Chart types · Data & Configuration

Local and host-controlled selection

interaction.mode: 'select' commits local selection after source activation. selectionMode: 'single' selects one semantic target; 'multiple' enables Ctrl/Meta toggling. A plain activation replaces the selection even in multiple mode. Selection identity uses row member paths, column member paths and measure identity, so labels and displayed order do not become source IDs.

For host control, use interaction.mode: 'event' and onSelectionRequest(selection). This notifies the proposed semantic targets without committing local selection. Validate or transform the request, then call setSelection when the host accepts it. onNodeClick continues to report canonical raw activation independently of the host’s decision.

const chart = await createChart({ container, chartType: 'line', data, mapping,
  interaction: { mode: 'event', selectionMode: 'multiple' },
  onSelectionRequest: selection => { void chart.setSelection(selection); },
});

Check both the catalog type and renderer interaction capabilities before enabling selection. XY brushing is a separate opt-in interaction with its own supported families; see value-axis navigation and brushing.