When embedded in an HTML document, Tableau visualization (viz) takes 100% of the window width by default.
If you want to center the Tableau Viz in your HTML document, you need to add a parent element with the desired width and margin styles that will cause the Tableau HTML elements to be centered.
For example, I have a pie chart graph published in Tableau Public in the following link:
To embed the pie chart in an HTML page, click on the share button and copy the Embed Code provided in the box:
Then, you need to paste the embed code into your HTML document to display the Tableau Viz on the browser.
Some HTML tags from Tableau are omitted for brevity in the example below:
<body>
<div
class="tableauPlaceholder"
id="viz1646888708983"
style="position: relative"
>
<!-- code omitted for brevity... -->
</div>
</body>
But when the width of the browser window is too large, the Viz might be displayed with a huge empty white space between the chart and the legend:
You can reduce this gap by centering the main <div> with class="tableauPlaceholder" attribute with another <div> tag.
In the following example, the <div class="tableau-center"> tag is created to wrap the tableauPlaceholder div element:
<body>
<style>
.tableau-center {
width: 800px;
margin-left: auto;
margin-right: auto;
}
</style>
<div class="tableau-center">
<div
class="tableauPlaceholder"
id="viz1646888708983"
style="position: relative"
></div>
</div>
</body>
A CSS style is then added to the tableau-center element, adding width, margin-left, and margin-right properties.
The visualization rendered on the page will look as follows:
With the wrapping <div> tag, you can center the embedded Viz while also setting the width of the Viz.
This way, the huge gap between the chart and the legend will be reduced.
I hope this tutorial has been useful for you. 👍
