plotly.js

The open source JavaScript graphing library that powers Plotly

Show Sidebar Hide Sidebar
Plotly.js

Subplots in plotly.js

How to make D3.js-based subplots in Plotly.js. Seven examples of stacked, custom-sized, and gridded subplots.

var trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [50, 60, 70],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  xaxis: {domain: [0, 0.45]},
  yaxis2: {anchor: 'x2'},
  xaxis2: {domain: [0.55, 1]}
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [50, 60, 70],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var data = [trace1, trace2];

var layout = {
  xaxis: {domain: [0, 0.7]},
  yaxis2: {anchor: 'x2'},
  xaxis2: {domain: [0.8, 1]}
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3],
  y: [4, 5, 6],
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [50, 60, 70],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var trace3 = {
  x: [300, 400, 500],
  y: [600, 700, 800],
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};

var trace4 = {
  x: [4000, 5000, 6000],
  y: [7000, 8000, 9000],
  xaxis: 'x4',
  yaxis: 'y4',
  type: 'scatter'
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  xaxis: {domain: [0, 0.45]},
  yaxis: {domain: [0, 0.45]},
  xaxis4: {
    domain: [0.55, 1],
    anchor: 'y4'
  },
  xaxis3: {
    domain: [0, 0.45],
    anchor: 'y3'
  },
  xaxis2: {domain: [0.55, 1]},
  yaxis2: {
    domain: [0, 0.45],
    anchor: 'x2'
  },
  yaxis3: {domain: [0.55, 1]},
  yaxis4: {
    domain: [0.55, 1],
    anchor: 'x4'
  }
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2, 3],
  y: [2, 3, 4],
  type: 'scatter'
};

var trace2 = {
  x: [20, 30, 40],
  y: [5, 5, 5],
  xaxis: 'x2',
  yaxis: 'y',
  type: 'scatter'
};

var trace3 = {
  x: [2, 3, 4],
  y: [600, 700, 800],
  xaxis: 'x',
  yaxis: 'y3',
  type: 'scatter'
};

var trace4 = {
  x: [4000, 5000, 6000],
  y: [7000, 8000, 9000],
  xaxis: 'x4',
  yaxis: 'y4',
  type: 'scatter'
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  xaxis: {domain: [0, 0.45]},
  yaxis: {domain: [0, 0.45]},
  xaxis4: {
    domain: [0.55, 1],
    anchor: 'y4'
  },
  xaxis2: {domain: [0.55, 1]},
  yaxis3: {domain: [0.55, 1]},
  yaxis4: {
    domain: [0.55, 1],
    anchor: 'x4'
  }
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2],
  y: [10, 11, 12],
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4],
  y: [100, 110, 120],
  xaxis: 'x2',
  yaxis: 'y2',
  type: 'scatter'
};

var trace3 = {
  x: [3, 4, 5],
  y: [1000, 1100, 1200],
  xaxis: 'x3',
  yaxis: 'y3',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

var layout = {
  yaxis: {domain: [0, 0.266]},
  legend: {traceorder: 'reversed'},
  xaxis3: {anchor: 'y3'},
  xaxis2: {anchor: 'y2'},
  yaxis2: {domain: [0.366, 0.633]},
  yaxis3: {domain: [0.733, 1]}
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [0, 1, 2],
  y: [10, 11, 12],
  type: 'scatter'
};

var trace2 = {
  x: [2, 3, 4],
  y: [100, 110, 120],
  yaxis: 'y2',
  type: 'scatter'
};

var trace3 = {
  x: [3, 4, 5],
  y: [1000, 1100, 1200],
  yaxis: 'y3',
  type: 'scatter'
};

var data = [trace1, trace2, trace3];

var layout = {
  yaxis: {domain: [0, 0.33]},
  legend: {traceorder: 'reversed'},
  yaxis2: {domain: [0.33, 0.66]},
  yaxis3: {domain: [0.66, 1]}
};

Plotly.newPlot('myDiv', data, layout);
var trace1 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(1,1)'
};

var trace2 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(1,2)',
  xaxis: 'x2',
  yaxis: 'y2'
};

var trace3 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(1,2)',
  xaxis: 'x3',
  yaxis: 'y3'
};

var trace4 = {
  x: [1, 2],
  y: [1, 2],
  type: 'scatter',
  name: '(1,2)',
  xaxis: 'x4',
  yaxis: 'y4'
};

var data = [trace1, trace2, trace3, trace4];

var layout = {
  title: 'Mulitple Custom Sized Subplots',
  xaxis: {
    domain: [0, 0.45],
    anchor: 'y1'
  },
  yaxis: {
    domain: [0.5, 1],
    anchor: 'x1'
  },
  xaxis2: {
    domain: [0.55, 1],
    anchor: 'y2'
  },
  yaxis2: {
    domain: [0.8, 1],
    anchor: 'x2'
  },
  xaxis3: {
    domain: [0.55, 1],
    anchor: 'y3'
  },
  yaxis3: {
    domain: [0.5, 0.75],
    anchor: 'x3'
  },
  xaxis4: {
    domain: [0, 1],
    anchor: 'y4'
  },
  yaxis4: {
    domain: [0, 0.45],
    anchor: 'x4'
  }
};

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.