Listening to chart interaction events
Embedded Datawrapper visualizations can send events to the embedding website via the window.postMessage() method – which can be useful, e.g. if you want to show information outside the visualization once a user clicks or hovers on something in it.
Our helper function events.js makes things a little easier.
Here's an example: First, embed the helper function. Then use datawrapper.on() to listen to the events you want, 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 interaction 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 onto 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 visualization. | - url (the source url)
|
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. You can find an example and more information here: https://cdn.datawrapper.de/external-tooltips/
Ben Kates from the Urban Institute demoed something similar at our user conference Unwrapped. Watch his talk "Creating extended Datawrapper tooltips with Svelte" below.