Responsive charts outside of Observable

[dgwyer]

From the docs:

The default width is 640. On Observable, the width can be set to the standard width to make responsive plots.

I need to be able to do the same for my own plots outside of the Observable website. Is there a way to do that right now?

[Fil]

There are as many ways as there are frameworks.

In vanilla JavaScript, you might want to listen to the resize event and refresh the plot:

doChart();
window.addEventListener("resize", doChart);
function doChart() {
    document.querySelector("#chart").innerHTML = "";
    document
      .querySelector("#chart")
      .appendChild(
        Plot.plot({ marks: [Plot.frame()], width: window.innerWidth })
      );
  });

[dgwyer]

Thanks for posting that.

Would it also be an idea to have an option that set the SVG width to 100% the size of the container rather than a specific width. That would be super useful.

[dgwyer]

I meant that at the moment a fixed width/height is always(?) applied to the SVG node returned by plot. But in some cases I need to not have this explicitly set so it can take up the full width of its container. I don't suppose that's an option at the moment?

[Fil]

You can remove it with setAttribute:

  const a = Plot.plot({ marks: [Plot.frame()] });
  a.setAttribute("width", null);
  return a;

EDIT: better version below.

[dgwyer]

While this works, it does result in a console error for me: Error: <svg> attribute width: Expected length, "null"..

I think we need an additional option to be able to remove the width SVG attribute altogether. And do the same for the height attribute too, as a separate option, in case we need a fixed height, but responsive width.

[Fil]

sorry, I should have double-checked. Here's a better version:

  const a = Plot.plot({ marks: [Plot.frame()] });
  a.removeAttribute("width");
  a.removeAttribute("height");
  return a;

[dgwyer]

No problem, and thanks for the update. That should work nicely.