---
schema_version: "1"
id: 133bb0138bdf7d539a6bea0a54aec0d5291f3b85b2b39a3a88958b680a6360ba
title: Resize
collection: tableau
version: current
locale: en-us
portal_url: https://docs.salesforce.com/tableau/current/en-us/api/js_api/JavaScriptAPI/js_api_sample_resize.md
canonical_url: https://help.tableau.com/current/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)));
}
```