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

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