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
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.
Updated 5 months ago