Interactivity

<GraphProvider input={spec} data={data}>
  <GraphRenderer /> {/* hover + tooltips on by default */}
</GraphProvider>

​

How hover works

• Banded and bucketed cartesian geoms — bars, lines, areas — snap along the main axis: the coordinate the categories or buckets run along, which is x for a vertical bar or line chart and y for a horizontal bar chart. The cursor never has to land exactly on an observation, which is why a line chart responds smoothly between vertices. Everything at that main-axis position highlights together — every segment in a stack, every series in a multi-line chart — and the tooltip lists their values in legend order.
• Point layers — scatter — use nearest-neighbour in 2D, so the closest marker wins rather than the nearest column.
• Polar charts — pie and donut — hit-test the enclosing arc: the slice the cursor is inside.
• Grid layers — heatmaps — hit-test the enclosing cell, over its full band rather than the inset tile painted inside it. Cells the data leaves empty answer no hover.

geom.point({ interactive: false });

styles({ defaults: [style.geom.point({ size: 6 })] });

​

Restyling hover and dimming

styles({
  overrides: [
    style.geom({ alpha: 0.15 }, { state: 'dimmed' }),
    style.geom.bar({ borderColor: '#0B5FFF', borderWidth: 2 }, { state: 'hovered' }),
  ],
});

​

Tooltips

<GraphRenderer showTooltips={false} />

import { DefaultTooltip, type TooltipSlotProps } from '@graphysdk/react';

const MyTooltip = ({ content }: TooltipSlotProps) => (
  <div className="my-tooltip-shell">
    <DefaultTooltip content={content} />
  </div>
);

<GraphRenderer slots={{ Tooltip: MyTooltip }} />;

​

Animation

<GraphRenderer animation={false} />
<GraphRenderer animation={{ transitions: false }} />
<GraphRenderer animation={{ intro: { stagger: false, durationScale: 2 } }} />

​

Related

• Styling — the hovered and dimmed states, and everything else the chart paints
• Slots — replace the tooltip or other regions
• Provider & renderer — showTooltips, animation, mode