How to make the plot take full width of it's container?

[that-ambuj]

I'm currently working on a dashboard, I need to make the plot take full width but I can't seem to find the correct way to do this with responsiveness.

As shown, the plot by default does not take the full available space.

With width set to high number (i.e. 2000) it takes the full space but the text is too small, especially for mobile devices.

Now with style css set to width: 100%, it takes the full width but the text is too large.

Is there any way that I can make it responsive while the text is correctly sized?

[that-ambuj]

Setting the width to window.innerWidth kinda works but it does not react to changes. I'm using vue and I've tried setting width to a reactive value but the plot does not re-render on change.

This is what the code looks like:

import * as Plot from "@observablehq/plot";
// @ts-expect-error No Types provided
import * as htl from "htl";
import { nextTick, onMounted, onUnmounted, ref } from "vue";
import appl from "../../../extras/aapl.json";
import { useDisplay } from "vuetify";

const svgRef = ref<HTMLElement>();
const plot = ref<ReturnType<typeof Plot.plot>>();

const { width } = useDisplay();

onMounted(() => {
  plot.value = Plot.plot({
    width: width.value,
    height: 200,
    marks: [
      Plot.lineY(appl, {
        stroke: "#00AFFF",
        x: "Date",
        y: "Open",
        interval: "friday",
      }),
      Plot.areaY(appl, {
        fill: "#00AFFF",
        fillOpacity: 0.1,
        x: "Date",
        y: "Open",
        interval: "friday",
      }),
    ],
  });

  svgRef.value?.appendChild(plot.value);
});

onUnmounted(() => {
  svgRef.value?.removeChild(plot.value!);
});

[Fil]

This is more a question for vue. You would use the resulting width as a top-level option for your plot.

[mbostock]

Typically you would use ResizeObserver to observe the responsive width of a container, and re-render the plot, replacing the previous render whenever the width changes. (If you use Observable Framework, you can do this using the built-in reactive width variable.)