Plotly chart not responsive

📊 Plotly Python
1

I’ve embedded various Plotly charts in my blog here - https://singhkays.com/blog/apple-silicon-m1-video-power-consumption-pt-1/

However, these don’t resize when the browser width changes or when the charts are viewed on a smartphone screen.

The Hugo shortcode used to embed the Plotly chart json is described in this blog

{{ $json := .Get "json" }}
{{ $height := .Get "height" | default "200px" }}
<div id="{{$json}}" class="plotly" style="height:{{$height}}"></div>
<script>
Plotly.d3.json({{$json}}, function(err, fig) {
    Plotly.plot('{{$json}}', fig.data, fig.layout, {responsive: true});
});
</script>

Here is the Python code for one of the charts

    fig = px.bar(barDf, x='Video Type', y=['Efficiency Cluster', 'Performance Cluster', 'DRAM', 'GPU', 'Other'], template='plotly_dark', orientation='v', hover_name = 'Video Type',
    width = 700, height = 400, barmode = 'group', 
    labels={"value": "Power Consumption (mW)"})

    fig.update_yaxes(title_font = dict(size=12), color="#707070", title_font_color = "#707070", tickfont = dict(size = 9), gridcolor='#242424', zerolinecolor = '#242424', range=[0, 1100])
    fig.update_xaxes(zeroline = True, showgrid=False, color="#FFF", title_font_color = "#707070", tickfont = dict(size = 11), title_text='')
    fig.update_traces(hovertemplate='%{y:.0f} (mW)', texttemplate='%{y:.0f}', textfont= dict(size=8), width=[0.11, 0.11, 0.11, 0.11, 0.11])
    fig.update_layout( autosize = True, hovermode=False, legend_title_text='',
        legend=dict(orientation="h", yanchor="bottom", y=1, xanchor="center", x=0.5), 
        font = dict(family="SF Pro Display, Roboto, Droid Sans, Arial"),
        title={
            'text': "<b>Average Power Consumption</b> <br> <sup> Apple Mac Mini M1 | YouTube VP9 4K SDR | MacOS 11.2.2 </sup>",
            'y':0.93,
            'x':0.54,
            'xanchor': 'center',
            'yanchor': 'top',
            'font': dict(size=18, color='#FFF')},
        margin = dict(r = 30, b = 0, t = 80),
        margin_pad = 10,
        modebar = dict(orientation = 'v'),
        plot_bgcolor='#191C1F',
        paper_bgcolor ='#191C1F'
    )

    fig.write_json("outputs/plotly-power-average-browser.json")

I’ve researched few different posts on here and on Stack Overflow and it indicated that Plotly charts are responsive by default. I also read through the documentation article here - Responsive / Fluid Layouts | JavaScript | Plotly

What could be causing the issues?

2

For anyone reading this, I solved this by not setting width and height in the px.bar method. The height was set in the Plotly shortcode for Hugo and the responsiveness worked.