Add your own CSS

With plotjs, you can add your own CSS for advanced plot customization. Here's how it works.

What is CSS?

CSS has two main components:

Selectors: which elements the style applies to
Rules: a set of key: value pairs defining the style

A basic CSS rule looks like this:

.tooltip {
  background: red;
  color: blue;
}

This means: "For all elements with class tooltip, set the background to red and the text color to blue."

Applying CSS to a plot

You can directly apply a CSS string to your plot:

(
    PlotJS()
    .add_tooltip(labels=df["tooltip"])
    .add_css(".tooltip { background: red; color: blue; }")
)

CSS doesn’t require indentation: one-liners work fine.

Using a Python dictionary

For better readability and reusability, you can define CSS as a dictionary using plotjs.css.from_dict():

from plotjs import css

(
    PlotJS()
    .add_tooltip(labels=df["tooltip"])
    .add_css(css.from_dict({
        ".tooltip": {
            "background": "red",
            "color": "blue"
        }
    }))
)

Method chaining also works if you want to split styles:

(
    PlotJS()
    .add_tooltip(labels=df["tooltip"])
    .add_css(css.from_dict({".tooltip": {"color": "blue"}}))
    .add_css(css.from_dict({".tooltip": {"background": "red"}}))
)

Loading CSS from a file

If your CSS is stored in a .css file like:

.tooltip {
  background: pink;
  color: yellow;
}

You can load it with:

from plotjs import css

(
    PlotJS()
    .add_tooltip(labels=df["tooltip"])
    .add_css(css.from_file("docs/static/style.css"))
)

Selectable elements

To style or add interactivity, you need to select elements using the DOM¹. These are the most common selectors:

Plot elements

.point: scatter plot points
.line: line chart lines
.area: area chart fills
.bar: bar chart bars
.plot-element: all of the above

You can combine with .hovered or .not-hovered, e.g., .point.hovered.

Misc

.tooltip: tooltip shown on hover
svg: the entire SVG element

Question

Something missing? Please open an issue!

Default CSS

You can find the default CSS applied by plotjs here

Appendix

The DOM (Document Object Model) is like a tree structure representing your webpage. JavaScript and CSS use it to select, modify, and interact with elements dynamically. ↩