How to embed transparent Tableau visualizations into portals and apps. Should I do it?
By: Alex Eskinasy
Tags: Transparency, Tableau, Dataviz, Datafam, Power Bi

How to embed transparent Tableau visualizations into portals and apps. Should I do it? Alex Eskinasy Jun 2·4 min read

Back in 2018, Tableau released a much wanted feature to allow dataviz artists build dashboards with transparent backgrounds. The #datafam community quickly embraced this feature and started sharing some wicked vizzes. I’m not usually building fancy vizzes myself, but it did get me curious as well and led me to have my own creative artist moment:

Live interactive version here

Tableau’s out-of-the-box “Transparent Background” feature works nice and well when we are interacting with Tableau vizzes directly on Tableau Online GUI (or Server or Public), but some key questions I often hear are How to control transparency of visualizations when embedding in third-party apps and portals? Is it even possible? Can I control it in the app instead of Tableau?

And the short is yes to all :D

The reality is that it’s even easier to control the opacity (aka “transparency”) of a viz on an embedded solution than implementing it on the Tableau view itself. We can do it directly on the web app we are embedding the viz and it doesn’t require us to apply the transparency on the Tableau dasbhoard itself at all.

Important Note: there’s a small but important difference between the two approaches: If we implement it solely in Tableau, what we are essentially doing is keeping the actual marks on the viz fully visible (i.e. opacity = 1, unless explicitly set to something different), in addition to completely washing out the background and potentially also replacing it by a picture (e.g. just like my viz about Plastic Polution). In contrast, if we implement the opacity on the embedded viz container instead, we’re actually washing out the whole embedded object, including the marks. A few times a combination of these two techniques gives the final result we want. Which ones make more sense for YOUR use case?

How to control the opacity of a Tableau Embedded Viz Object?

The implementation couldn’t be easier. We just need to set the opacity style property of the container where the iframe containing the Tableau embedded viz (or in one of its parents). And naturally, we also need to have a parent object with the background image (thanks Anthony :). For example:

<div id=”vizContainer” style=”opacity: 0.8;”></div>

Does it even make sense to use transparency on visualizations?

To be honest, this is perhaps the most important question in this post.

The first time I saw this in action, it did make a lot of sense to me, as the webpage had a dark non-intrusive background and the artist wanted the end user to explore charts through a very immersive experience, where the viz background blended well with the parent container that was hosting it.

This “Scrollytelling” page, created by the talended folks at The Information Labs, executes this concept in style. Here the user can scroll through the page and see background images “flying in” and provides an additional level of (visual) isights about the topic in question (Forest fires across the globe), which complements the text and Tableau charts embedded in the page.