Using HTML Style Object Properties with Embedded Tableau Visualizations

I recently presented at the Analytics Summit at the University of Cincinnati Center for Business Analytics. As part of my presentation, I mentioned the human appeal of round edges in design. This can be seen in the design of our smart phones, tablets, furniture and in many architectural elements. This got me thinking about Tableau Public visualizations and how they are styled when they are embedded in web pages. The options for styling the parameters in the Tableau embed code is very limited. However, it is possible to add additional styling to the visualization with the HTML Style Object Properties using CSS or a little bit of Javascript. The viz above loads using a rounded border set in the CSS and the buttons utilize Javascript to make changes to the viz styling on the fly.

Here's the basic setup:

First, when copying and pasting your Tableau Public Embed code, add an "id=tabCon" in the first div tag.


To control the styling in the CSS, add the properties to your stylesheet.


To control the styling using Javascript, add the properties in your HTML document with the Tableau Public embed code.


Add buttons on the HTML form to dynamically control the properties or just use the function in the HTML. In the example below, I also use class="button" to format the buttons from the CSS. There is a great tool here that will help create custom buttons and create the CSS code.

Example using buttons to call each of the functions:

To call a function directly, simple use the name of the function. Example, RoundFunction().

I hope you find this information useful. If you have any questions feel free to email me at Jeff@DataPlusScience.com

Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility