Listening to Chart Interaction Events

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>

Below is a list of all the visualization interacttion events currently emitted.

Note that events typically are not emitted from non-interactive elements. If you aren't seeing the expected events, make sure the elements are set to be interactive (e.g the tooltip is enabled).

Visualization events

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, Scatterplot
symbol.mouseenter	Triggered when user moves the cursor on a symbol.	Symbol map, Scatterplot
symbol.mouseleave	Triggered when user moves the cursor off of a symbol.	Symbol map, Scatterplot

General events

Event	Event description	Event data
vis.rendered	Triggered when the visualization finishes rendering.
hash.changed	Triggered when there have been changes to the anchor part of a URL.	hash (the new hash)
download	Triggered when a reader downloads via a link in the footer (e.g image download, or data download)	type (csv, png, pdf, svg)
social-sharing.click	Triggered when a reader clicks one of the social sharing icons	platform (linkedin, twitter, facebook)
embed.modal.open	Triggered when a reader clicks the 'embed' link in a visualization footer
embed.modal.close	Triggered when a reader closes the modal opened when clicking the 'embed' link in a visualization footer
embed.copy	Triggered when a reader copies the embed code shown when clicking on the 'embed' link in a visualization footer
source.click	Triggered when a reader follows a linked source in a visulaization.	- url (the source url) - name (the written name of the source)

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.