Listening to Chart Interaction Events

A list of all message events currently emitted from Datawrapper charts.

Rendered charts send events to the embedding website via the window.postMessage() method.
You can use our helper function events.js to make things a little easier.

Example:
First, embed the helper function and use datawrapper.on( ) from the script to listen to visualization events. Then listen to events emitted, in this case, the bar.click event.

<script src="https://static.dwcdn.net/js/events.js"></script>

<script>

   datawrapper.on('bar.click', (event) => {
      console.log(event.chartId, event.data);   
   });
  
</script>

Here's a list of all the events currently emitted:

Event

Event description

Supported chart type

bar.click

Triggered when user clicks on a chart element (e.g. a bar in a bar chart, or the dot in a dot plot).

Bars, Stacked bars, Split bars, Bullet bars, Dot plot, Range plot, Arrow plot

bar.mouseenter

Triggered when user moves the cursor onto a chart element (e.g. a bar in a bar chart, or the dot in a dot plot).

Bars, Stacked bars, Split bars, Bullet bars, Dot plot, Range plot, Arrow plot

bar.mouseleave

Triggered when user moves the cursor off of a chart element (e.g. a bar in a bar chart, or the dot in a dot plot).

Bars, Stacked bars, Split bars, Bullet bars, Dot plot, Range plot, Arrow plot

line.click

Triggered when user clicks on a line in a line chart.

Line chart

line.mouseenter

Triggered when user moves the cursor onto a line in a line chart.

Line chart

line.mouseleave

Triggered when a user moves the cursor off of a line in a line chart.

Line chart

area.click

Triggered when user clicks on an area in an area chart.

Area chart

area.mouseenter

Triggered when user moves the cursor onto an area in an area chart.

Area chart

area.mouseleave

Triggered when a user moves the cursor off of an area in an area chart.

Area chart

tooltip

Triggered when the tooltip is fully shown in line chart or area chart.

Line chart, Area chart

highlight.set

Triggered when a user moves the cursor on a bar/dot or the legend to fade out other elements.

Bars, Stacked bars, Split bars, Bullet bars, Dot plot, Range plot, Arrow plot, Line chart, Column chart

highlight.clear

Triggered when a user moves the cursor off of a bar/dot or the legend to clear highlight.set event.

Bars, Stacked bars, Split bars, Bullet bars, Dot plot, Range plot, Arrow plot, Line chart, Column chart

column:change

Triggered when user switches between tabs to display different columns of the dataset.

Column chart with multiple series

region.click

Triggered when user clicks on a region.

Choropleth map

region.mouseenter

Triggered when user moves the cursor on a region.

Choropleth map

region.mouseleave

Triggered when user moves the cursor off of a region.

Choropleth map

symbol.click

Triggered when user clicks on a symbol.

Symbol map

symbol.mouseenter

Triggered when user moves the cursor on a symbol.

Symbol map

symbol.mouseleave

Triggered when user moves the cursor off of a symbol.

Symbol map

hash.change

Triggered when there have been changes to the anchor part of a URL.

All chart types

Example Use-case

External Tooltips

External tooltips can be used to display the tooltips outside of the iframe. This is useful when you want the tooltips to be visible regardless of the position of the visualization. See an example here.