Set Plot Colours with External CSS

Dash Python
1

We’re working on a set of visualizations using either Dash or D3. We wanted to have 1 CSS stylesheet that would define things like colour-palettes for plots.

How would one go about specifying using these palettes in Dash? I noticed that the styling of e.g. points on a graph seems to be done inline in the html:
<path class="point" transform="translate(77.93,36.27)" d="M3,0A3,3 0 1,1 0,-3A3,3 0 0,1 3,0Z" style="opacity: 1; stroke-width: 0px; fill: rgb(31, 119, 180); fill-opacity: 1;"></path>

Would there be a a way of accessing External CSS variables in the Dash python code?

2

Plotly.js does not provide a way to customize the CSS through stylesheets (see https://github.com/plotly/plotly.js/issues/1195#issuecomment-262793638), all of the styling is done through the charting API itself (e.g. marker.color)

1 Like
3

Gotcha. I’ll look into loading these variables in Python. Thanks Chris!

1 Like
4

This would be a really neat feature if Plotly ever considered adding it!

Allowing to over-ride the style of plots via CSS would be a really clean way for designers to be able to tweak the styling alongside other site style changes, without having to dig into code.