Styling observable Plot with css/style

I’m trying to nudge some details on facet labels or other texts in Observable Plot using the style option and/or external CSS but couldn’t find many references and the only one (Plots | Observable Plot) it’s pretty scarce…

I know Plot is not supposed to be used for “end user” but sometimes even for data exploring some visual/reading touchup is needed!

Can you share more details about what you’re trying to do?

In general, I recommend inspecting the SVG element hierarchy generated by Plot in your browser’s developer tools. You can also use these tools to apply styles manually and see how they look. And then once you get a sense for what you want, you can translate those styles into selectors and then apply them either via an external stylesheet or using Plot’s top-level style option.

Here are three examples:

Thanks for the samples!

I used that kind of workaround but ended up realizing that when trying to embed the plot somewhere else with the javascript option, the CSS gets lost in the middle, so I was trying to figure out how to use the Plot´s “style” internal option instead, and found no samples on that!

Hola Ruso, you can declare style rules in a cell and then add that cell to your embed.

For example, this notebook features a cell called stylesheet with all my css wrapped in an html block. I then embed a selection of cells including stylesheet here. This embed retains all my style rules fine.

Hope it helps :slight_smile:

1 Like

awesome example thanks!

1 Like