Setting Graph Size in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Adjusting Height, Width, and Margins

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

Automatically Adjust Margins

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: {
      text: 'Y-axis Title',
      font: { size: 30 }
    },
    ticktext: ['long label','Very long label','3','label'],
    tickvals: [1, 2, 3, 4],
    tickmode: 'array',
    automargin: true,
  },
  paper_bgcolor: '#7f7f7f',
  plot_bgcolor: '#c7c7c7'
};
Plotly.newPlot('myDiv', data, layout);