Embed Width

Community Help
1

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
image1904×899 73.8 KB

When I’m viewing the chart in my observable notebook - 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 -

<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>
2

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

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/

3

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!

4

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 width to be a value that works better for your embed (slightly more work).

5

that’s a perfect point! @hockeyfan22 seems like this was responded before, and Mike posted a solution on how to override width Embedded width and another pattern here should width be a view?

6

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 ?

<div 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";
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.

7

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>
2 Likes
8

Thanks, professor McClure! This worked fine for me. :grinning:

1 Like