plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Responsive / Fluid Layout in plotly.js

How to create a plot with a responsive layout in javascript.

By setting plotly.js config to { responsive: true }, plots will be resized upon changing the size of the window. This is especially useful for mobile devices switching from portrait to landscape!

var trace1 = {
    type: 'bar',
    x: [1, 2, 3, 4],
    y: [5, 10, 2, 8],
    marker: {
        color: '#C8A2C8',
        line: {
            width: 2.5
        }
    }
};

var data = [ trace1 ];

var layout = {
  title: 'Responsive to window's size!',
  font: {size: 18}
};

Plotly.newPlot('myDiv', data, layout, {responsive: true});
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.