# Dashboard API.resize not working with rendered javascript objects

**URL:** <https://community.developer.atlassian.com/t/dashboard-api-resize-not-working-with-rendered-javascript-objects/75398>\
**Category:** Jira Server\
**Tags:** resize, jira-dashboard, api, jira-server\
**Created:** [December 11, 2023, 1:23pm UTC](https://community.developer.atlassian.com/t/dashboard-api-resize-not-working-with-rendered-javascript-objects/75398 "2023-12-11T13:23:58Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![FionaBeveridge](https://avatars.discourse-cdn.com/v4/letter/f/919ad9/32.png) [@FionaBeveridge](https://community.developer.atlassian.com/u/FionaBeveridge)\
**Post date:** [December 11, 2023, 1:23pm UTC](https://community.developer.atlassian.com/t/dashboard-api-resize-not-working-with-rendered-javascript-objects/75398/1 "2023-12-11T13:23:58Z")

</div>

I have a dashboard item using d3.js to render javascript items, however the API.resize is not working and the d3 objects spill out over the dashboard item’s frame. I have created a div with the space the d3 requires in my soy template which is called before resize is but this hasn’t helped. I would love to know what I am doing wrong here.

- my soy template for the d3 code

```auto
{template .Chart}
<head>
    <title>chart</title>
    <meta name="decorator" content="atl.general"/>
</head>
<div id="chart">
  <div class="svg" width="800" height="400">
    <h1>hello world</h1>
  </div>
</div>

{/template}

```

- a snippet from my dashboard item renderer

```auto
self.issues = data.issues;
            if (self.issues === undefined || self.issues.length === 0) {
                $element.empty().html(Dashboard.Item.Tutorial.Templates.Empty());
            }
            else {
                $element.empty().html(Dashboard.Item.Tutorial.Templates.IssueList({issues: self.issues}));
                $element.append(Dashboard.Item.Tutorial.Templates.Chart());
                d3chart.chart(self.issues);
            }
            self.API.resize();
            $element.find(".submit").click(function (event) {
                event.preventDefault();
                self.render(context, preferences);
            });
        });

        this.API.once("afterRender", this.API.resize);

```