Divyank
Divyank

Reputation: 1057

Change Background color of Menu Button in Plotly

I tried changing background color of menu button in plotly, code is running sucessfully but "bgcolor:grey" changes are not applied.

I checked documentation and used same syntax,code is running.

Code-

df['vix'] = nf_vix['Close'].round(decimals = 1)

fig = go.Figure(
      data=[ go.Scatter(x=df.index,y=df.vix, line=dict(color='green', width=3),name='Low Volatility',fill='tozeroy'),
             go.Scatter(x=df.index,y=df.vix.where(df.vix >= 20), mode='lines+markers',line=dict(color='red', width=3),name='High Volatality',fill='toself')],
             layout_title_text="NIFTY Volatality Index" )

#Hide Weekends and Added Range Slider
fig.update_xaxes( rangeslider_visible=True, rangebreaks=[ dict(bounds=["sat", "mon"])])
fig.update_layout( xaxis_tickformat = ' %d %B (%a)<br> %Y',xaxis_title='Date',yaxis_title='Range',template ='plotly_dark',legend = dict(bgcolor = 'rgba(0,0,0,0)'))
##https://plotly.com/python/legend/
fig.update_layout(legend=dict(
    orientation="h",
    yanchor="bottom",
    y=1.02,
    xanchor="right",
    x=1
))
# fig.add_hrect(y0=0, y1=20, 
#               annotation_text="Low volatality", annotation_position="top left",
#               fillcolor="green", opacity=0.25, line_width=0)
fig.update_layout(
    xaxis=dict(rangeselector=dict(buttons=list([
               dict(count=1,label="1m",step="month",stepmode="backward"),dict(count=3,label="3m",step="month",stepmode="backward"),
               dict(count=6,label="6m",step="month",stepmode="backward"),
               dict(count=1,label="YTD",step="year",stepmode="todate"),
               dict(step="all") ])  ),rangeslider=dict(visible=False),type="date"))
# fig.update_layout(updatemenus=dict(bgcolor = 'grey'))
fig.update_layout({
'updatemenus': [{'bgcolor' : 'grey'}]})

fig.show()

doc- https://plotly.com/python/reference/layout/updatemenus/

Viz Snap -

VIZ

Update-- Now I have added the below code in above code, the font color changed to "black". I want to know if "background color" of "range selector" buttons can be changed or not.

I got github link but this attribute rangeselector.activebgcolor is not working. Link - https://github.com/plotly/plotly.js/issues/790

fig.update_layout(xaxis=dict(rangeselector = dict(font = dict( color = "black"))))

Updated Snap-

Updated VIZ with Black Font color

Upvotes: 3

Views: 2506

Answers (1)

r-beginners
r-beginners

Reputation: 35240

Update: The font color and background color of the range selector button and the background color of the active button can be changed with The answer is taken from the official reference.

import plotly.express as px
import pandas as pd

df = pd.read_csv('https://raw.githubusercontent.com/plotly/datasets/master/finance-charts-apple.csv')

fig = px.line(df, x='Date', y='AAPL.High', title='Time Series with Range Slider and Selectors')

fig.update_xaxes(
    rangeslider_visible=True,
    rangeselector=dict(
        buttons=list([
            dict(count=1, label="1m", step="month", stepmode="backward"),
            dict(count=6, label="6m", step="month", stepmode="backward"),
            dict(count=1, label="YTD", step="year", stepmode="todate"),
            dict(count=1, label="1y", step="year", stepmode="backward"),
            dict(step="all")
        ])
    )
)
# update
fig.update_layout(template='plotly_dark',
                  xaxis_rangeselector_font_color='black',
                  xaxis_rangeselector_activecolor='red',
                  xaxis_rangeselector_bgcolor='green',
                 )
fig.show()

enter image description here

Upvotes: 4

Related Questions