Subplots in JavaScript

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

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Try Plotly Studio now.

Simple Subplot

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 = {
  grid: {rows: 1, columns: 2, pattern: 'independent'},
};

Plotly.newPlot('myDiv', data, layout);

Custom Sized Subplot

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

Multiple 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 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 = {
  grid: {rows: 2, columns: 2, pattern: 'independent'},
};

Plotly.newPlot('myDiv', data, layout);

Subplots with Shared Axes

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 = {
  grid: {
    rows: 2,
    columns: 2,
    subplots:[['xy','x2y'], ['xy3','x4y4']],
    roworder:'bottom to top'
  }
};

Plotly.newPlot('myDiv', data, layout);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n x: [1, 2, 3],\n y: [2, 3, 4],\n type: 'scatter'\n};\n\nvar trace2 = {\n x: [20, 30, 40],\n y: [5, 5, 5],\n xaxis: 'x2',\n yaxis: 'y',\n type: 'scatter'\n};\n\nvar trace3 = {\n x: [2, 3, 4],\n y: [600, 700, 800],\n xaxis: 'x',\n yaxis: 'y3',\n type: 'scatter'\n};\n\nvar trace4 = {\n x: [4000, 5000, 6000],\n y: [7000, 8000, 9000],\n xaxis: 'x4',\n yaxis: 'y4',\n type: 'scatter'\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n grid: {\n rows: 2,\n columns: 2,\n subplots:[['xy','x2y'], ['xy3','x4y4']],\n roworder:'bottom to top'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">

Stacked Subplots

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 = {
grid: {
    rows: 3,
    columns: 1,
    pattern: 'independent',
    roworder: 'bottom to top'}
};

Plotly.newPlot('myDiv', data, layout);

Stacked Subplots with a Shared X-Axis

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

Multiple Custom Sized Subplots

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: {text: 'Multiple 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);

</script>\n</head>\n\n<body>\n\t<div id='myDiv'></div>\n</body>","js":"var trace1 = {\n x: [1, 2],\n y: [1, 2],\n type: 'scatter',\n name: '(1,1)'\n};\n\nvar trace2 = {\n x: [1, 2],\n y: [1, 2],\n type: 'scatter',\n name: '(1,2)',\n xaxis: 'x2',\n yaxis: 'y2'\n};\n\nvar trace3 = {\n x: [1, 2],\n y: [1, 2],\n type: 'scatter',\n name: '(1,2)',\n xaxis: 'x3',\n yaxis: 'y3'\n};\n\nvar trace4 = {\n x: [1, 2],\n y: [1, 2],\n type: 'scatter',\n name: '(1,2)',\n xaxis: 'x4',\n yaxis: 'y4'\n};\n\nvar data = [trace1, trace2, trace3, trace4];\n\nvar layout = {\n title: {text: 'Multiple Custom Sized Subplots'},\n xaxis: {\n domain: [0, 0.45],\n anchor: 'y1'\n },\n yaxis: {\n domain: [0.5, 1],\n anchor: 'x1'\n },\n xaxis2: {\n domain: [0.55, 1],\n anchor: 'y2'\n },\n yaxis2: {\n domain: [0.8, 1],\n anchor: 'x2'\n },\n xaxis3: {\n domain: [0.55, 1],\n anchor: 'y3'\n },\n yaxis3: {\n domain: [0.5, 0.75],\n anchor: 'x3'\n },\n xaxis4: {\n domain: [0, 1],\n anchor: 'y4'\n },\n yaxis4: {\n domain: [0, 0.45],\n anchor: 'x4'\n }\n};\n\nPlotly.newPlot('myDiv', data, layout);\n"}">