Learn how to use Dash Bio for next-gen sequencing & quality control. 🧬Register for the Oct 27 webinar.

How to responsive plotly python in website

I would like to show my chart in website (about 20-30 charts up to variable that had created.)

Now I can show my chart in website by using this code…

1. This code is in python back-end :

after I set figure (fig = go.Figure) then I dumps python array by this code:

        for i in range(len(dataTraceAvg)):
            exec("graphJSONAvg.append(dataTraceAvg[{}])".format(i))
        graphJSONAvg = json.dumps(graphJSONAvg, cls=plotly.utils.PlotlyJSONEncoder)

2. This code is in JavaScript

but when I resize web browser my chart append like this :

I need to responsive chart. How can I do that?

1 Like

Hi @Kanpisek,

This might help. A responsive configuration parameter was added in plotly.js 1.41.0.

Hope that helps!
-Jon

1 Like

I followed the steps add {responsive: true}, it can not responsive. But I add {scrollZoom: true} like this

Plotly.newPlot(‘chartAvg’+i, g1[i].data, g1[i].layout, {scrollZoom: true} || {});

it can work. I think my website may have some problems.

@jmmease Can that responsive configuration for plotly.js 1.41.0 be set with/for plots made with Plotly Python?

You should be able to set it like the other config parameters in https://plot.ly/python/configuration-options/#offline-configuration-options. This would require version 3.3.0+

In addition, 3.4.0 is going to automatically support responsive resizing when the figure width/height aren’t explicitly specified across all options in plotly.offline.iplot and plotly.offline.plot. See https://github.com/plotly/plotly.py/pull/1234

I am indeed able to make the plot responsive by not specifying neither width nor height in the plotly.graphobjs.Layout object. However, that has the downside of the exported PNG (when clicking on the camera icon on the top right corner of the plot) be too small (when one specifies width and height, the PNG would use such dimensions).

Is there a way to specify width and height and also explicitly request the plot to be responsive?
So far I have tried the suggested config, i.e.

layout = go.Layout(...)
layout['width'] = 1920
layout['height'] = 1080    
fig = go.Figure(traces_to_plot, layout=layout)
config={'responsive': True}
py.plot(fig, config=config, output_type='div',
            include_plotlyjs='cdn', ...)

But the resulting plot is not responsive. Am I missing something?

As a workaround I could specify the dimensions for the export function (camera icon), but I haven’t found how to do that. Any help is highly appreciated.

Same problem for me with {‘responsive’: True}. It has not worked with python 3.4.0. Any work around? Thanks.

Hi @eleanorrigby and @sokhna,

You can use the toImageButtonOptions config parameter to override the save image button’s options. Here’s an example of configuring the figure so that the save image button saves an image with dimensions 1000x400, in svg format, named bar_chart.svg.

import plotly.graph_objs as go
from plotly.offline import plot

fig = go.Figure(
    data=[go.Bar(y=[1, 3, 2])],
    layout=go.Layout(title='Figure Title')
)

config = {'toImageButtonOptions':
          {'width': 1000,
           'height': 400,
           'format': 'svg',
           'filename': 'bar_chart'}}

plot(fig, filename='output_bar.html', config=config, show_link=False)

Here’s where I looked up the config options: https://github.com/plotly/plotly.js/blob/5a9e3400beeac2bae72a99cf5e82e55fa45370a3/src/plot_api/plot_config.js#L150-L153

Hope that helps!
-Jon

Thanks @jmmease , I can confirm that it works.

1 Like

And what if I return a figure object for dash instead of calling plot ???