# Embed Width

**URL:** https://talk.observablehq.com/t/embed-width/3197
**Category:** Help
**Created:** [April 29, 2020, 10:37pm UTC](https://talk.observablehq.com/t/embed-width/3197 "2020-04-29T22:37:05Z")
**Posts on this page:** 8
**Page:** 1

<div class="post-metadata">

### Author: ![hockeyfan22](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hockeyfan22/32/3035_2.png) [@hockeyfan22](https://talk.observablehq.com/u/hockeyfan22)
#### Post date: [April 29, 2020, 10:37pm UTC](https://talk.observablehq.com/t/embed-width/3197/1 "2020-04-29T22:37:05Z")

</div>

I’m having a problem embedding a chart from observable - specifically I need to control the width of the chart because it’s too far to the right and getting cut off in the browser (see screenshot below).

 ![image](https://canada1.discourse-cdn.com/flex030/uploads/observablehq/original/2X/5/57b693be8b168c2279c0029e480151f35721f4d1.png)

When I’m viewing the chart [in my observable notebook](https://observablehq.com/d/03213a1995d8572c) - the chart itself appears smaller and is aligned to the left of the notebook, but when I embed the chart I have the issue above.

Below is my embed code -

```auto
<div id="observablehq-f0b76e48">
  <div class="observablehq-viewof-season"></div>
  <div class="observablehq-chart"></div>

</div>
<script type="module">
  import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
  import define from "https://api.observablehq.com/d/03213a1995d8572c.js?v=3";
  (new Runtime).module(define, name => {
    if (name === "viewof season") return Inspector.into("#observablehq-f0b76e48 .observablehq-viewof-season")();
    if (name === "chart") return Inspector.into("#observablehq-f0b76e48 .observablehq-chart")();
  });
</script>

```

---

<div class="post-metadata">

### Author: ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)
#### Post date: [April 29, 2020, 11:51pm UTC](https://talk.observablehq.com/t/embed-width/3197/2 "2020-04-29T23:51:02Z")

</div>

First, it seems like your chart is not completely responsive. Could you use a `height` proportional to Observable responsive `width`? such as

```auto
height = width*2/3

```

Then, what are you using for your layout?  
Simple flex box container with two columns seems to have the chart aligned to left, besides the non responsive chart.

Example:  
[https://fringe-tundra-polish.glitch.me/](https://fringe-tundra-polish.glitch.me/)

> **[Glitch](https://glitch.com/edit/#!/fringe-tundra-polish?path=index.html)**
>
> Combining automated deployment, instant hosting & collaborative editing, Glitch gets you straight to coding so you can build full-stack web apps, fast

---

<div class="post-metadata">

### Author: ![hockeyfan22](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/hockeyfan22/32/3035_2.png) [@hockeyfan22](https://talk.observablehq.com/u/hockeyfan22)
#### Post date: [April 30, 2020, 12:33am UTC](https://talk.observablehq.com/t/embed-width/3197/3 "2020-04-30T00:33:25Z")

</div>

Thanks! I started by fixing the height.

I think the layout could be causing some of my problem - it’s a hugo theme blog I deploy through R Markdown and probably has it’s own margin next to where the post content appears. I take a look into the theme documentation to find some more details.

Appreciate your response!

---

<div class="post-metadata">

### Author: ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)
#### Post date: [April 30, 2020, 3:18am UTC](https://talk.observablehq.com/t/embed-width/3197/4 "2020-04-30T03:18:24Z")

</div>

The reactive Observable `width` variable is designed to reflect the width of the entire page. Unfortunately, this means that it doesn’t play too nicely with embedding by default.

I’d recommend that you either embed a version of your notebook that doesn’t rely on `width` (easy), or use the Observable Runtime API to [redefine](https://github.com/observablehq/runtime#module_redefine) `width` to be a value that works better for your embed (slightly more work).

---

<div class="post-metadata">

### Author: ![radames](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/radames/32/1699_2.png) [@radames](https://talk.observablehq.com/u/radames)
#### Post date: [April 30, 2020, 3:52am UTC](https://talk.observablehq.com/t/embed-width/3197/5 "2020-04-30T03:52:49Z")

</div>

that’s a perfect point! @hockeyfan22 seems like this was responded before, and Mike posted a solution on how to override width [Embedded width](https://talk.observablehq.com/t/embedded-width/1063/3) and another pattern here [should width be a view?](https://talk.observablehq.com/t/should-width-be-a-view/1834/2)

---

<div class="post-metadata">

### Author: ![lucasborges](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lucasborges/32/6051_2.png) [@lucasborges](https://talk.observablehq.com/u/lucasborges)
#### Post date: [January 31, 2022, 7:06pm UTC](https://talk.observablehq.com/t/embed-width/3197/6 "2022-01-31T19:06:27Z")

</div>

Could you help me to modify the code below so that the width is overwritten to fit the wrapper div, not document body’s width ?

```auto
<div id="wrapper">
<div id="observablehq-chart5-d2b0e014"></div>
</div>

```

```auto
<script type="module">
import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
import define from "https://api.observablehq.com/d/4e870377f17fc889.js?v=3";
new Runtime().module(define, name => {
  if (name === "chart5") return new Inspector(document.querySelector("#observablehq-chart5-d2b0e014"));
});
</script>

```

I still didn’t get how I should do it. Any help is appreciated.

---

<div class="post-metadata">

### Author: ![mcmcclur](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mcmcclur/32/2364_2.png) [@mcmcclur](https://talk.observablehq.com/u/mcmcclur)
#### Post date: [January 31, 2022, 9:13pm UTC](https://talk.observablehq.com/t/embed-width/3197/7 "2022-01-31T21:13:11Z")

</div>

You can name the Runtime instance and then call its redefine method to reset `width`. Here’s a full HTML document that does so:

```
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div style = "border: solid 1px black" id="wrapper">
    <div id="observablehq-chart5-d2b0e014"></div>
    </div>

    <script type="module">
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    import define from "https://api.observablehq.com/d/4e870377f17fc889.js?v=3";
    let main = new Runtime().module(define, name => {
      if (name === "chart5") return new Inspector(document.querySelector("#observablehq-chart5-d2b0e014"));
    });

    let w = 800;
    let div = document.getElementById('wrapper')
    div.style.width = `${w}px`
    main.redefine('width', 0.8*w)
    </script>
  </body>
</html>
```

---

<div class="post-metadata">

### Author: ![lucasborges](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/lucasborges/32/6051_2.png) [@lucasborges](https://talk.observablehq.com/u/lucasborges)
#### Post date: [February 1, 2022, 11:38am UTC](https://talk.observablehq.com/t/embed-width/3197/8 "2022-02-01T11:38:28Z")

</div>

Thanks, professor McClure! This worked fine for me. 😀