---
schema_version: "1"
id: a2bded097f8896d64347e2bd032e24aa8b340e497a7b9e707ccae4f3b276ccd6
title: Resize
collection: tableau
version: next
locale: en-us
portal_url: https://docs.salesforce.com/tableau/next/en-us/api/js_api/JavaScriptAPI/js_api_sample_resize.md
canonical_url: https://help.tableau.com/v0.0/api/js_api/en-us/JavaScriptAPI/js_api_sample_resize.htm
source_site: help.tableau.com
content_type: documentation
content_hash: dd00f247f3ee5183ec0a2fefa8d3247ee09a7e369b60c0e4d1b19022784c9a19
description: Important changes for the Tableau JavaScript API
---
[Skip to main content](#main-content)

# 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](https://help.tableau.com/current/api/embedding_api/en-us/index.html).

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.

   
  
Resize

* * *

  

```
<!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)));
}
```