style the figure element?

[Fil]

The use case (at the bottom of this notebook) is a Plot that we want to make 2800px wide, and which should scroll horizontally in Observable.

My suggestion was to create a figure parent by adding a caption, then setting max-width + scroll overflow styles to the parent, like so:

Object.assign(
Plot.plot({ 
  width: 2800, height: 700, // sets the viewBox of the .plot svg
  caption: "", // wraps the plot in a figure element
  style: {maxWidth: "2800px"}, // overrides max-width: 100%; of the .plot default css
  … rest of the plot definition
}),
  { style: `max-width: ${width}px; overflow: scroll` } // overrides the figure/max-width style of observable and adds scrolling
)

it looks like there should be a better way at least to set styles on the figure element

[EE2dev]

I find the default font-size fairly small, but I can adjust it with ...style: { fontSize: 14} . However, just the text elements of the SVG is rerendered, the font-size of the legend remains the same. It would be nice to also style the text of the legend.

[Fil]

"Dark mode" is another use case for this: https://talk.observablehq.com/t/plot-legend-fill-color-when-embedded/7494

[Hvass-Labs]

I also have the problem where the font-size of the legend doesn't change. See this example:

Which was generated using the following code:

var data = [
    { Date: new Date('1962-01-02'), Value: 0.0406, Name: 'Foo' },
    { Date: new Date('1962-01-03'), Value: 0.0403, Name: 'Bar' },
    { Date: new Date('1962-01-04'), Value: 0.0399, Name: 'Foo' },
    { Date: new Date('1962-01-05'), Value: 0.0402, Name: 'Bar' },
    { Date: new Date('1962-01-06'), Value: 0.0402, Name: 'Foo' },
    { Date: new Date('1962-01-07'), Value: 0.0403, Name: 'Bar' },
    { Date: new Date('1962-01-08'), Value: 0.0403, Name: 'Foo' },
    { Date: new Date('1962-01-09'), Value: 0.0405, Name: 'Bar' },
    { Date: new Date('1962-01-10'), Value: 0.0407, Name: 'Foo' },
    { Date: new Date('1962-01-11'), Value: 0.0408, Name: 'Bar' },
    { Date: new Date('1962-01-12'), Value: 0.0408, Name: 'Foo' },
    { Date: new Date('1962-01-13'), Value: 0.0409, Name: 'Bar' },
    { Date: new Date('1962-01-14'), Value: 0.0409, Name: 'Foo' },
    { Date: new Date('1962-01-15'), Value: 0.041, Name: 'Bar' },
];

var plot = Plot.frame().plot({
    color: {
        legend: true,
    },
    style: {
        fontSize: 20,
    },
    margin: 55,
    grid: true,
    y: {percent: true},
    marks: [
        Plot.lineY(data, {x: "Date", y: "Value", stroke: "Name"}),
    ],
});