How to apply the border-radius property to graphs? And to make the titles responsive?

[BeginnerDash]

I would like to apply the CSS border-radius property to the corners of my graph, but so far it’s unsuccessuful

My html code :

 html.Div(
    className='graphfrontend',
    style={'width': '50%', 'height': '100%','margin-right':'0.7em', 'border-radius': '5px'},
            children=dcc.Graph(
             id='graphfrontend',
             figure=graph,
             style={'width': '100%', 'height': '100%', 'border-radius': '5px'},
             ),
 ),

The code of the graph:

fig = make_subplots(
    # shared_yaxes=False,
    # horizontal_spacing=0,
)

fig.add_trace(
    go.Bar(
        x=...
        orientation='h',
        y=...
        text=...
    )
),

fig.update_layout(
    barmode='stack',
    margin=dict(l=0, r=0, t=25, b=0),
    xaxis_title=None,
    yaxis_title=None,
    showlegend=False,
    uniformtext_minsize=20,
    uniformtext_mode='show',
    bargap=0.1,
    title_text="Nombre de wafers produits par mois"
),

fig.update_traces(
    textfont_size=20,

I have been tinkering with the containers provided by Dash but nothing worked so far… thanks for the help !

Edit : on a side note, I am also looking for the property to make the title of the graph responsive. Thank you.

[celia]

Hi! It’s not working because you cannot change the background image of the plot itself with css. What you have to do is make the plot background transparent and make the dcc.Graph component background color white. Then you will see the changes to the border.

Try this:

import plotly.graph_objects as go # or plotly.express as px
import plotly.graph_objects as go

x=['b', 'a', 'c', 'd']
fig = go.Figure(go.Bar(x=x, y=[2,5,1,9], name='Montreal'))
fig.add_trace(go.Bar(x=x, y=[1, 4, 9, 16], name='Ottawa'))
fig.add_trace(go.Bar(x=x, y=[6, 8, 4.5, 8], name='Toronto'))

fig.update_layout(barmode='stack', xaxis={'categoryorder':'total descending'})
# line to make background color transparent
fig.update_layout(paper_bgcolor='rgba(0,0,0,0)')

import dash
import dash_core_components as dcc
import dash_html_components as html

app = dash.Dash()
app.layout = html.Div([
    html.Br(),
    html.Div(
        dcc.Graph(
            figure=fig, 
            style={ 'border-radius':'15px', 'background-color':'white'})
    ),
    html.Br()
], style={'background-color':'black', 'padding':'15px',})

app.run_server(debug=True)  # Turn off reloader if inside Jupyter

[BeginnerDash]

Ah now it works, thank you very much @celia ! If by chance you would know how the title of the graph could be responsive (when zooming in and out it adjusts itself to the size of the window) it’d be fantastic