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] When I’m viewing the chart in my observable notebook - the chart itself appears small…

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 no…

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. Appreci…

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 Ru…

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/@observableh…

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">…

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

Embed Width

Community Help

radames April 30, 2020, 3:52am 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?

Topic		Replies	Views
Problem with width (truncated plot) on HTML embedded chart ... Community Help	2	414	April 4, 2020
Embedded width Community Help	5	2400	April 10, 2019
Embeding a notebook cell in a resizable and draggable react component ? Community Help	2	1366	November 27, 2019
Do Notebooks have a default width variable? Does it set automatically? Community Help	2	284	October 24, 2022
Embed chart function in a webpage New To Observable	2	858	August 2, 2023

Embed Width

Related topics