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