Resize
Important changes for the Tableau JavaScript API
As of February 2024, the Tableau JavaScript API is deprecated. Use the Embedding API v3 instead for embedding interactive views into web pages and applications. For guidance on embedding Tableau views, see the Tableau Embedding API v3 Help(Link opens in a new window).
Resize a visualization to a size that you specify. Worksheets automatically resize to fill the div container for the visualization. However, dashboards and stories do not resize automatically unless you create them with the automatic size option in Tableau Desktop. Scroll down to see how to change the size of a visualization that contains a dashboard or story.
<!DOCTYPE html>
<html>
<head>
<title>Resizing</title>
<script type="text/javascript"
src="https://public.tableau.com/javascripts/api/tableau-2.min.js"></script>
<script type="text/javascript">
var viz;
function initViz() {
var containerDiv = document.getElementById("vizContainer"),
url = "http://public.tableau.com/views/RegionalSampleWorkbook/Stocks",
options = {
hideTabs: true
};
viz = new tableau.Viz(containerDiv, url, options);
}
function vizResize() {
var width = document.getElementById("resizeWidth").value;
var height = document.getElementById("resizeHeight").value;
viz.setFrameSize(parseInt(width, 10), parseInt(height, 10));
}
</script>
</head>
<body onload="initViz();">
<div id="vizContainer" style="width:800px; height:700px; overflow:auto;"></div>
<div id="controls" style="padding:20px;">
<form id="resizeForm">
<input type="text" id="resizeWidth" placeholder="Width">
<input type="text" id="resizeHeight" placeholder="Height">
<button type="button" onClick="vizResize();">Resize</button>
</form>
</div>
</body>
</html>
To change the size of a visualization that contains a dashboard or story, use the following function instead.
function vizResize() {
var width = document.getElementById("resizeWidth").value;
var height = document.getElementById("resizeHeight").value;
var sheet = viz.getWorkbook().getActiveSheet();
sheet.changeSizeAsync(
{"behavior": "EXACTLY", "maxSize": { "height": height, "width": width }})
.then(viz.setFrameSize(parseInt(width, 10), parseInt(height, 10)));
}