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. Sign up for early access now.
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);
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 = {
grid: {rows: 2, columns: 2, pattern: 'independent'},
};
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 = {
grid: {
rows: 2,
columns: 2,
subplots:[['xy','x2y'], ['xy3','x4y4']],
roworder:'bottom to top'
}
};
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 = {
grid: {
rows: 3,
columns: 1,
pattern: 'independent',
roworder: 'bottom to top'}
};
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: {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);
