Interactions

Chart-local interaction

Inspect, select, zoom, and legend focus on one plot. Shared semantic state is opt-in via createPlotInteraction. Full prop and event contracts are in the interaction reference and interactions guide.

0 emphasized · 0 selected Inspect a point, select a region, or focus a legend series.

<script lang="ts">
  import { createPlotInteraction, GeomPoint, GGPlot } from "@ggsvelte/svelte";

  const interaction = createPlotInteraction<string>();
  const scope = { keys: "rows", x: "x", y: "y" } as const;
</script>

<GGPlot
  {interaction}
  interactionScope={scope}
  data={rows}
  key="id"
  aes={{ x: "period", y: "value", color: "series" }}
  inspect
  legendFocus
  select={{ type: "interval", mode: "xy" }}
  zoom={{ mode: "x" }}
>
  <GeomPoint size={4} />
</GGPlot>

Runnable demos

Deeper interaction patterns

Interval selection and zoom 333 Palmer penguins: brush a rectangle to select, or zoom into the crowded middle where the species overlap.
One interval, applied in every panel 333 Palmer penguins split by island, with a coordinate interval selection that holds across all the facets at once.
Link plots, controls, and a table Five Palmer penguins per species, so every row a selection touches is visible in the table beside the chart.