Auto-resize a specific histogram

plotly.js
1

Hello Everybody.

Thanks for this nice community and good work.
I’m glad to be using Plotly.

I had a question regarding implementation of autoresize function inside a specific histogram syntax.
I would like to do an autoresize on this diagram :

var xValue = ['xxxxx];
var yValue = [‘xxxxx’];

var trace1 = {
x: xValue,
y: yValue,
orientation:‘h’,
type: ‘bar’,
marker: {
color: ‘rgb(237,125,49)’,
opacity: 0.6,
line: {
color: ‘rbg(8,48,107)’,
width: 0
}
}

};

var annotationContent = [];
var data = [trace1];

var layout = {
title: ‘“Les 50 premières affiliations”’,
titlefont:{size:20,family:‘Corbel’},
font: {
size:7.5,
},
annotations: annotationContent,
xaxis: {
title: ‘Volume de publications’,
titlefont: {
family: ‘Agency FB’,
size: 18,
color: ‘#3392ad’
}
},
yaxis: {
title: ‘Affiliations’,
titlefont: {
family: ‘Agency FB’,
size:23,
color: ‘#3392ad’
}
},
height:600,
margin: {
l: 190,
r: 180,
b: 40,
t: 80,
pad: 1,
}

};

for( var i = 0 ; i < xValue.length ; i++ ){
var result = {
x: xValue[i],
y: yValue[i],
text: xValue[i],
xanchor: ‘left’,
yanchor: ‘middle’,
showarrow: false
};
annotationContent.push(result);
}

Plotly.newPlot(‘myDiv13’, data, layout);

using this particular function provided by Poltly team :

(function() {
var d3 = Plotly.d3;

var WIDTH_IN_PERCENT_OF_PARENT = 60,
HEIGHT_IN_PERCENT_OF_PARENT = 80;

var gd3 = d3.select(‘body’)
.append(‘div’)
.style({
width: WIDTH_IN_PERCENT_OF_PARENT + ‘%’,
‘margin-left’: (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + ‘%’,

    height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
});

var gd = gd3.node();

Plotly.plot(gd, [{
type: ‘bar’,
x: [1, 2, 3, 4],
y: [5, 10, 2, 8],
marker: {
color: ‘#C8A2C8’,
line: {
width: 2.5
}
}
}], {
title: ‘Auto-Resize’,
font: {
size: 16
}
});

window.onresize = function() {
Plotly.Plots.resize(gd);
};

})();

Could anyone help me ?

G.

2

Looks like you’ve got all the pieces right.

What’s wrong exactly?

3

Hello,

Thank you for your reply.

What is missing is the syntax construction, i can’t put the pieces all together.

I managed to create from scratch a website incorporating plotly graphs but now i can’t adapt my graph syntax with the function itself.

How do you think we could combine those 2 syntaxes ?

F.

4

I’d really appreciate if you could give me a working instance of it, so i could chew on it as a reference.

Thanks,
F.