Show Sidebar Hide Sidebar
Plotly.js

Responsive / Fluid Layout in JavaScript

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});

plotly.js runs on all SVG-compatible browsers