Interactivity

To use interactivity, you need to provide:

• `isInteractive` set to true;

• `key` or `key_alt` (see basic props for an examplation of these)

The component then emits events when interacting with the regions.

The payload is the `key` or `key_alt` of the region being interacted with:

• Clicking a region dispatches a `clicked` event;

• Mouse-entering a region dispatches a `entered` event;

• Mouse-exiting a region dispatches a `exited` event.

You can style the hovered region by passing:

• `hoverFill` (default: `#f6f6f6`),

• `hoverStroke` (default: `black`),

• `hoverStrokeWidth` (default: 1.5),

• `hoverStrokedasharray` (default: '').

Please hover and click regions of this chart to read the correspondent event payload below.

Choose an example

Usage

<ChoroplethG
  {height}
  {width}
  isInteractive={true}
  key='iso_a2'
  on:clicked={onClicked}
  on:entered={onEntered}
  on:exited={onExited}
  topojson={world_110m_iso_a2}
  topojsonId='countries'
/>

Props

isInteractive

key

topojson

topojsonId