React Plotly JS apply dark (plotly_dark) theme

Question

Using React Plotly Js library. Need robust solution instead of passing plot_bgcolor and paper_bgcolor for creating dark-themed chart. Can't find doc related to theming for javascript.

I am aware of creating dark-themed Plotly charts by changing the plot_bgcolor, paper_bgcolor and other internal attributes.

However, the outcome of this method doesn't look as good as the chart produced using the default dark theme available in plotly python version.

As per Plotly python doc passing the theme name to the figure object is enough to change the theme.

import plotly.express as px

df = px.data.gapminder()
df_2007 = df.query("year==2007")

for template in ["plotly", "plotly_white", "plotly_dark", "ggplot2", "seaborn", "simple_white", "none"]:
    fig = px.scatter(df_2007,
                     x="gdpPercap", y="lifeExp", size="pop", color="continent",
                     log_x=True, size_max=60,
                     template=template, title="Gapminder 2007: '%s' theme" % template)
    fig.show()

As per the above doc, the python version ships with inbuilt themes ('ggplot2', 'seaborn', 'simple_white', 'plotly','plotly_white', 'plotly_dark', 'presentation', 'xgridoff','ygridoff', 'gridon').

I was hoping, I could use one of these themes(plotly_dark) inside my website.

I tried searching for a similar feature in Plotly javascript. The closest I got is Javascript layout template. But there is no mention of using inbuilt themes.

I am looking for something similar to the python theme template, which I can use through React Plotly js library.

Here is the blog link Introducing plotly.py Theming discussing the theming feature for python, which came out in 2018.

Here is the github link to the python file that generates the theme template for plotly.py definitions.py

Here is a link to codesandbox https://codesandbox.io/s/react-plotly-y9ifj9?file=/src/App.js containing the example code available on react plotly website.

Kindly help me by pointing me in the right direction

Answer 1

This is a good question. Like you, I could not find any reference to the built-in themes in the Javascript code. So here is my crude workaround to get the dark theme in Javascript:

The blog article you mentioned contains a link to an example notebook:

http://nbviewer.jupyter.org/github/jonmmease/plotly.py_release_notebooks/blob/master/notebooks/v3.4.0/templates-gapminder.ipynb

If you run this notebook, you can get the JSON data from the dark themed chart using this code:

fig_plotly_dark = go.FigureWidget(fig)
fig_plotly_dark.layout.template = 'plotly_dark'
fig_plotly_dark.to_plotly_json()["layout"]["template"]

(You might have to replace python's "True" with "true" to get a valid json.) The extracted template can then be used in a Javascript / React Plotly chart by assigning it to the layout.template property.

See this jsFiddle: https://jsfiddle.net/3hfq7ast/