How to responsive plotly python in website

📊 Plotly Python
1

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 :

ChartData
ChartData902×582 46.7 KB

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

JavaScript
JavaScript695×596 48.8 KB

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

Website
Website1641×536 46.1 KB

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

1 Like
2

Hi @Kanpisek,

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

Hope that helps!
-Jon

1 Like
3

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.

JavaScript
JavaScript737×678 59.7 KB

Website2
Website21432×864 72.3 KB

4

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

5

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

6

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.

7

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

8

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

9

Thanks @jmmease , I can confirm that it works.

1 Like
10

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