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:

Visualization events

EventEvent descriptionSupported chart type
bar.clickTriggered 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.mouseenterTriggered 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.mouseleaveTriggered 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.clickTriggered when user clicks on a line in a line chart.Line chart
line.mouseenterTriggered when user moves the cursor onto a line in a line chart.Line chart
line.mouseleaveTriggered when a user moves the cursor off of a line in a line chart.Line chart
area.clickTriggered when user clicks on an area in an area chart.Area chart
area.mouseenterTriggered when user moves the cursor onto an area in an area chart.Area chart
area.mouseleaveTriggered when a user moves the cursor off of an area in an area chart.Area chart
tooltipTriggered when the tooltip is fully shown in line chart or area chart.Line chart, Area chart
highlight.setTriggered 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.clearTriggered 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:changeTriggered when user switches between tabs to display different columns of the dataset.Column chart with multiple series
region.clickTriggered when user clicks on a region.Choropleth map
region.mouseenterTriggered when user moves the cursor on a region.Choropleth map
region.mouseleaveTriggered when user moves the cursor off of a region.Choropleth map
symbol.clickTriggered when user clicks on a symbol.Symbol map, Scatterplot
symbol.mouseenterTriggered when user moves the cursor on a symbol.Symbol map, Scatterplot
symbol.mouseleaveTriggered when user moves the cursor off of a symbol.Symbol map, Scatterplot

General events

EventEvent descriptionEvent data
vis.renderedTriggered when the visualization finishes rendering.
hash.changedTriggered when there have been changes to the anchor part of a URL.hash (the new hash)
downloadTriggered when a reader downloads via a link in the footer (e.g image download, or data download)type (csv, png, pdf, svg)
social-sharing.clickTriggered when a reader clicks one of the social sharing iconsplatform (linkedin, twitter, facebook)
embed.modal.openTriggered when a reader clicks the 'embed' link in a visualization footer
embed.modal.closeTriggered when a reader closes the modal opened when clicking the 'embed' link in a visualization footer
embed.copyTriggered when a reader copies the embed code shown when clicking on the 'embed' link in a visualization footer
source.clickTriggered 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.