plotly-logomark

HTML

<script src="https://cdn.plot.ly/plotly-basic-3.1.0-rc.0.min.js" charset="utf-8"></script>
<main id="app">
  <div>
    <div>important flex layout that needs the min-width for proper wrapping of flex elements</div>
    <h3><span lang="en">Plot</span></h3>
    <div id="plot"></div>
  </div>
</main>

CSS

#app {
  padding: 100px;

  & > * {
    min-width: min-content;
  }
}

Babel + JSX

const PLOTLY_CONFIG = {
  toImageButtonOptions: { format: "svg" },
  showEditInChartStudio: false,
  displaylogo: false,
  responsive: true,
  showLink: false,
};
const PLOTLY_LAYOUT = {
  hovermode: "closest",
  autosize: true,
};

document.addEventListener("DOMContentLoaded", async () => {
  const plotlyWrapper = document.createElement("div");
  plotlyWrapper.style.maxWidth = "100vw";
  const plot = await Plotly.newPlot(
    plotlyWrapper,
    [
      {
        type: "scatter",
        mode: "lines+markers",
        x: [1, 2, 3, 4],
        y: [1, 4, 9, 16],
      },
    ],
    PLOTLY_LAYOUT,
    PLOTLY_CONFIG,
  );
  // requestAnimationFrame(() => {
  //   Plotly.Plots.resize(plot);
  // });
  // setTimeout(() => {
  //   document.querySelector("h3").appendChild(plotlyWrapper);
  // })
  document.getElementById("plot").appendChild(plotlyWrapper);
});