observable plot background color

Community Help
1

I have build a chart with observalble plot with a dark background: https://observablehq.com/embed/b148b6e87a01be8f?cells=chart%2Cviewof+contcheck%2Cviewof+years%2Cviewof+wert%2Clabel%2Ctitle%2Cviewof+toggleanzeige%2Cviewof+togglepop%2Ccredits%2CmyStyles

Unfortunately there is a small area on the right where the background is not filled with that colour. I don´t know why. Here is the notebook where everything looks right: Emissionen (dark) / RND / Observable

This is the code:

    style: {
      backgroundColor: '#293845',
      color: '#ffffff',
    },
2

Hi @jchrist! Unfortunately this is a problem with how Observable’s Standard Library computes width:

  • Your external stylesheet changes document.body.clientWidth, but only after the initial value for width has been computed.
  • Then, because loading your styles does not trigger a “resize” event, the Plot chart will still use the stale width value.

If you resize the window manually you’ll see the chart expand.

1 Like
3

As a complement, here’s a change that seems to fix this notebook, at least for me (testing with Chrome—for some reason the bug doesn’t show up on Safari):

  Plot.plot({
    width: (width, document.body.clientWidth),
3 Likes
4

that does the trick, thank you for helping me!