Menu
After using Plotly.js to create a stack bar graph, I noticed that it doesn't respond to different screen widths. How can the graph be made responsive to resize automatically fitting the screen width?
I tried using the following, but it didn't work:
window.onresize = function() {
Plotly.Plots.resize('myDiv');
};
var trace1 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [20, 14, 23, 20, 14, 23, 34, 26],
marker: {
color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
},
name: 'Item 1',
type: 'bar'
};
var trace2 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [12, 18, 29, 12, 18, 29, 24, 22],
marker: {
color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
},
name: 'Item 2',
type: 'bar'
};
var trace3 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [12, 18, 29, 12, 18, 29, 24, 22],
marker: {
color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
},
name: 'Item 3',
type: 'bar'
};
var data = [trace1, trace2, trace3];
var layout = {
barmode: 'stack'
};
Plotly.newPlot('myDiv', data, layout);<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>
388
Responsive Plots If you set the responsive attribute equal to true (using the config object), then your figures will be automatically resized when the browser window size changes. This is an especially useful feature for charts which are going to viewed on mobile devices! Responsive to window's size!
js Free? Plotly's open-source graphing libraries are free to use, work offline and don't require any account registration. Plotly also has commercial offerings, such as Dash Enterprise and Chart Studio Enterprise.
New to Plotly? Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.
Automatically Adjust MarginsSet automargin to True and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.
Just set autosize to True in your layout, then set the x and y axis to autorange via the relayout method. i.e.
var trace1 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [20, 14, 23, 20, 14, 23, 34, 26],
marker: {
color: ['rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)', 'rgba(0,152,212,0.5)']
},
name: 'Item 1',
type: 'bar'
};
var trace2 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [12, 18, 29, 12, 18, 29, 24, 22],
marker: {
color: ['rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)', 'rgba(0,152,212,1)']
},
name: 'Item 2',
type: 'bar'
};
var trace3 = {
x: ['Category A', 'Category B', 'Category C', 'Category D ', 'Category E', 'Category F', 'Category G', 'Category H'],
y: [12, 18, 29, 12, 18, 29, 24, 22],
marker: {
color: ['rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)', 'rgba(0,54,136,1)']
},
name: 'Item 3',
type: 'bar'
};
var data = [trace1, trace2, trace3];
var layout = {
barmode: 'stack',
autosize: true // set autosize to rescale
};
Plotly.newPlot('myDiv', data, layout);
// update the layout to expand to the available size
// when the window is resized
window.onresize = function() {
Plotly.relayout('myDiv', {
'xaxis.autorange': true,
'yaxis.autorange': true
});
};<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<div id="myDiv"></div>
</body>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
