plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Setting Graph Size in plotly.js

How to change the size of D3.js-based graphs in javascript.

var data = [
  {
    x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
    y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
    type: 'scatter'
  }
];
var layout = {
  autosize: false,
  width: 500,
  height: 500,
  margin: {
    l: 50,
    r: 50,
    b: 100,
    t: 100,
    pad: 4
  },
  paper_bgcolor: '#7f7f7f',
  plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout);

Set automargin=true (reference) and Plotly will automatically increase the margin size to prevent ticklabels from being cut off or overlapping with axis titles.

var data = [
  {
    x: ['Apples', 'Oranges', 'Watermelon', 'Pears'],
    y: [3, 2, 1, 4],
    type: 'bar'
  }
];
var layout = {
  autosize: false,
  width: 500,
  height: 500,
  yaxis: {
    title: 'Y-axis Title',
    ticktext: ['long label','Very long label','3','label'],
    tickvals: [1, 2, 3, 4],
    tickmode: 'array',
    automargin: true,
    titlefont: { size:30 },
  },
  paper_bgcolor: '#7f7f7f',
  plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout);

plotly.js runs on all SVG-compatible browsers

Still need help?
Contact Us

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