CSS

With ninejs, 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 every element with the tooltip class, 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:

from ninejs import interactive, css, save

(
    interactive(gg)
    + css(".tooltip {font-size: 2em;}")
)

Using a Python dictionary¶

For better readability and reusability, you can define CSS as a dictionary:

(
    interactive(gg)
    + css(from_dict={".tooltip": {"color": "blue", "background": "red"}})
)

Method chaining also works if you want to split styles:

(
    interactive(gg)
    + css(".tooltip {font-size: 2em;}")
    + css(from_dict={".tooltip": {"color": "blue", "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:

(
    interactive(gg)
    + css(from_file="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
• .polygon: polygon chart maps
• .plot-element: all of the above

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

Misc¶

• .tooltip: tooltip shown on hover
• svg: the entire SVG element (e.g., the whole chart)

Default CSS¶

You can find the default CSS applied by ninejs here.

Appendix¶