Subplots in Nodejs

How to make subplots in nodejs. Seven examples of stacked, custom-sized, and gridded subplots.

Simple Subplot

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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]}
};
var graphOptions = {layout: layout, filename: "simple-subplot", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Custom Sized Subplot

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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]}
};
var graphOptions = {layout: layout, filename: "custom-size-subplot", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Multiple Subplots

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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"
  }
};
var graphOptions = {layout: layout, filename: "multiple-subplots", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Subplots with Shared Axes

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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"
  }
};
var graphOptions = {layout: layout, filename: "shared-axes-subplots", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Stacked Subplots

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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]}
};
var graphOptions = {layout: layout, filename: "stacked-subplots", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Stacked Subplots with a Shared X-Axis

// Learn about API authentication here: https://plotly.com/nodejs/getting-started
// Find your api_key here: https://plotly.com/settings/api

require('plotly')(username, api_key);

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]}
};
var graphOptions = {layout: layout, filename: "stacked-coupled-subplots", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});