HoverSync

import { HoverSync } from 'cx/ui';

HoverSync synchronizes hover effects between chart elements, legends, and grids. Elements with the same hoverId will highlight together when any of them is hovered.

 <div controller={PageController}>
  <HoverSync>
    <Legend />
    <Svg style="width: 100%; height: 300px">
      <ColorMap />
      <PieChart anchors="0 0.4 1 0">
        <Repeater records={m.points} recordAlias="$record" indexAlias="$index">
          <PieSlice
            value={m.$record.value}
            colorMap="pie"
            r={80}
            r0={40}
            offset={5}
            hoverId={m.$record.id}
            name={m.$record.name}
            selection={{
              type: KeySelection,
              bind: m.selection,
              records: m.points,
              record: m.$record,
              index: m.$index,
              keyField: "id",
            }}
          />
        </Repeater>
      </PieChart>
      <Chart
        anchors="0 1 1 0.4"
        offset="10 -10 -30 50"
        axes={{
          x: { type: NumericAxis, snapToTicks: 0 },
          y: { type: CategoryAxis, vertical: true, inverted: true },
        }}
      >
        <Gridlines />
        <Repeater records={m.points} recordAlias="$record" indexAlias="$index">
          <Bar
            name={m.$record.name}
            x={m.$record.value}
            y={m.$record.name}
            colorMap="pie"
            hoverId={m.$record.id}
            size={0.5}
            selection={{
              type: KeySelection,
              bind: m.selection,
              records: m.points,
              record: m.$record,
              index: m.$index,
              keyField: "id",
            }}
          />
        </Repeater>
      </Chart>
    </Svg>
    <Grid
      records={m.points}
      style="margin-top: 16px"
      columns={[
        {
          field: "name",
          pad: false,
          header: "Item",
          items: (
            <div class="flex items-center">
              <LegendEntry
                name={m.$record.name}
                colorMap="pie"
                selection={{
                  type: KeySelection,
                  bind: m.selection,
                  records: m.points,
                  record: m.$record,
                  index: m.$index,
                  keyField: "id",
                }}
                size={10}
                shape="circle"
              />
              <span text={m.$record.name} />
            </div>
          ),
        },
        {
          field: "value",
          header: "Value",
          format: "n;1",
          align: "right",
        },
      ]}
      selection={{
        type: KeySelection,
        bind: m.selection,
        keyField: "id",
      }}
      rowHoverId={m.$record.id}
    />
  </HoverSync>
</div> 
 class PageController extends Controller {
  onInit() {
    let value = 100;
    this.store.set(
      m.points,
      Array.from({ length: 6 }, (_, i) => ({
        id: i,
        name: `Item ${i + 1}`,
        value: (value = value + (Math.random() - 0.5) * 30),
      })),
    );
  }
} 
 interface DataPoint {
  id: number;
  name: string;
  value: number;
}

interface Model {
  points: DataPoint[];
  $record: DataPoint;
  $index: number;
  selection: number | null;
}

const m = createModel<Model>(); 
 import { Svg } from "cx/svg";
import {
  Chart,
  NumericAxis,
  CategoryAxis,
  Gridlines,
  Bar,
  PieChart,
  PieSlice,
  ColorMap,
  Legend,
  LegendEntry,
} from "cx/charts";
import { createModel } from "cx/data";
import { Repeater, Controller, HoverSync, KeySelection } from "cx/ui";
import { Grid } from "cx/widgets"; 

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item	Value
Item 1	114.5
Item 2	108.4
Item 3	97.6
Item 4	93.4
Item 5	96.1
Item 6	91.5

How It Works

Wrap related chart elements in a HoverSync component
Assign matching hoverId values to elements that should highlight together
When any element is hovered, all elements with the same hoverId will highlight

Configuration

HoverSync

Property	Type	Default	Description
`hoverChannel`	`string`	`"default"`	Channel name for isolating multiple hover contexts.

Element Props

Chart elements support these hover-related props:

Property	Type	Description
`hoverId`	`string \| number`	Identifier for synchronized hover highlighting.