1-line bug (--plot-background: white;)

[ryancwalsh]

Thanks for your amazing library. We're super excited about it!

This line of this commit was a mistake, right?

4baad4d#diff-30ab29a77cf3887e9e7e3ec68157a17e77e891ca7d6335074ab995ab1f27b82fR258-R265

I know it was meant to address #1434.

plot/src/plot.js

Line 261 in 17ed038

--plot-background: white;

I assume what we want is:

  background: var(--plot-background);

Right now, my tooltips look bad when my app is in dark mode (because the --plot-background gets overridden to white for this SVG.

If you have any quick tips for how to resolve, I'd appreciate it.

Thanks.

[Fil]

The corresponding selector is where(.plot) which has specificity 0, allowing you to override this color with, e.g.:

.plot {
    --plot-background: red;
}

or maybe more precisely:

.plot [aria-label=tip] {
    --plot-background: red;
}

You can wrap this in your dark mode definitions.

[ryancwalsh]

Thanks for your fast response!

👉 I still think this is a legit bug.

Before you replied, I was able to fix it by forking the plot library and fixing the 1 line here:

walsh-rose-ai@e6135a9

The result is what I wanted:

I was able to follow your suggestion to fix it too.

 svg [aria-label=tip] {
     --plot-background: ${themesMap[theme][ThemeVarNames.PlotBackground]};
 }

But it feels weird that I'm needing to define --plot-background again when I'd already defined it within :root.

What do you think?

Thanks.

[mbostock]

You can’t define the --plot-background property on the :root. Setting this property on :root has no effect. You need to define it on Plot’s class name as in @Fil’s reply. By default, that is .plot-d6a7b5:

.plot-d6a7b5 {
  --plot-background: darkblue;
}

Live example: https://observablehq.com/d/2cc5726c0d0ad080

Furthermore, setting the --plot-background variable does not set the background color of the SVG element, which is typically transparent. Instead it makes the desired background color available to marks that need it, such as the tip mark, which needs to fill the tip area to separate its contents visually from the background.

[ryancwalsh]

Thank you, @mbostock ! 😃

Very helpful.