Responsive charts for plot.ly not working

[DaveSimmons1234]

Hi there,

How do I incorporate {responsive: true} into the plot.ly renders js file? As give here:

https://plot.ly/javascript/responsive-fluid-layout/

I have tried:

Plotly.newPlot(result[0], data, $.extend(layout, {responsive: true}, layoutOptions, opts.plotly));

But it doesn't work. Could you help?

Thanks, D

[nicolaskruchten]

At the moment, the plotly renderers are not responsive, even though plotly.js has recently started supporting some new options for this kind of thing. At some point I'll have to try to see if they can be supported here as well.

[DaveSimmons1234]

Hi Nicolas,

Thanks for your response. I thought that might be the case. I have managed to incorporate a solution myself now. So all good.

Regards, Dan

[tom177y]

Hi Dan,

Would you able to share the incorporated codes that made plotly responsive with pivottable.js?

Thanks. /tommy

[DaveSimmons1234]

Hi Tom,

It was a while a go. I made quite a few changes in the plotly_renderers.js file, stripping out what I didn't really need - essentially it was incorporating responsive:true when creating a new plot for me

this line (however this is in the current version of the file so opts.plotlyConfig was not there)

Plotly.newPlot(result[0], [data], $.extend(layout, opts.plotly), opts.plotlyConfig);

I altered to:

Plotly.newPlot(result[0], data, layout, {responsive: true});

I hope that helps in someway.

[nicolaskruchten]

No modification is required, you should be able to just pass in the plotlyConfig renderer options with responsive set to true...

[nicolaskruchten]

See the docs here: https://github.com/nicolaskruchten/pivottable/wiki/Optional-Extra-Renderers#plotly-rendereroptions

[DaveSimmons1234]

Hi Nicolas,

I've done as you've said:

rendererOptions: {
plotlyConfig: {
responsive: true,
displayModeBar: true
},
heatmap: {
colorScaleGenerator: function(values) {
return Plotly.d3.scale.linear()
.domain([0, 25, 100])
.range(["#eeeeee","#85b140", "#445c4e"])
}
},

However it's not resizing when I drag the window. The other options, i.e. displayModeBar is working however.

Thanks, D

[DaveSimmons1234]

So after further investigation - responsive: true will not work with having the width set as given plotly_renderers.js

layout = {
          title: titleText,
          hovermode: 'closest',
          width: window.innerWidth / 1.4,
          height: window.innerHeight / 1.4 - 50
        };

[tom177y]

Hi Dan, thanks for your response and also tested plotlyConfig renderer option. That's what we did too and the result was negative.

With your last test, am I right that responsive : true still will not work for current version?

[DaveSimmons1234]

Hi Tom,

Yes it did remove the width line width: window.innerWidth / 1.4, and setting the plotlyConfig, responsive: true - worked for me.

However there are 2 caveats - that I believe are unresolvable until they update plotly.

1. Plotly with throw an error when you re-size the window whilst the plotly div is hidden - Error: Resize must be passed a displayed plot div element. i.e. show the plotly graph then show say the heatmap and then re-size the window the error will throw.

2. If you try and download a png of the graph/svg it will be squashed because unfortunately the download as png needs a fixed width value thus won't work on a responsive graph :-(

I've not read/found solutions to these issues yet.

Hope that's clear.

Dan

[tom177y]

Hi Dan,

Again, thank you for taking the time to explain. It’s clear now, especially on the caveats.

Regards, Tommy