Show Sidebar Hide Sidebar

# Multiple Axes in Nodejs

How to make a graph with multiple axes in nodejs.

#### Two Y-Axes

``````// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

var trace1 = {
x: [1, 2, 3],
y: [40, 50, 60],
name: "yaxis data",
type: "scatter"
};
var trace2 = {
x: [2, 3, 4],
y: [4, 5, 6],
name: "yaxis2 data",
yaxis: "y2",
type: "scatter"
};
var data = [trace1, trace2];
var layout = {
title: "Double Y Axis Example",
yaxis: {title: "yaxis title"},
yaxis2: {
title: "yaxis2 title",
titlefont: {color: "rgb(148, 103, 189)"},
tickfont: {color: "rgb(148, 103, 189)"},
overlaying: "y",
side: "right"
}
};
var graphOptions = {layout: layout, filename: "multiple-axes-double", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});
``````

#### Multiple Y-Axes

``````// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

var trace1 = {
x: [1, 2, 3],
y: [4, 5, 6],
name: "yaxis1 data",
type: "scatter"
};
var trace2 = {
x: [2, 3, 4],
y: [40, 50, 60],
name: "yaxis2 data",
yaxis: "y2",
type: "scatter"
};
var trace3 = {
x: [4, 5, 6],
y: [40000, 50000, 60000],
name: "yaxis3 data",
yaxis: "y3",
type: "scatter"
};
var trace4 = {
x: [5, 6, 7],
y: [400000, 500000, 600000],
name: "yaxis4 data",
yaxis: "y4",
type: "scatter"
};
var data = [trace1, trace2, trace3, trace4];
var layout = {
title: "multiple y-axes example",
width: 800,
xaxis: {domain: [0.3, 0.7]},
yaxis: {
title: "yaxis title",
titlefont: {color: "#1f77b4"},
tickfont: {color: "#1f77b4"}
},
yaxis2: {
title: "yaxis2 title",
titlefont: {color: "#ff7f0e"},
tickfont: {color: "#ff7f0e"},
anchor: "free",
overlaying: "y",
side: "left",
position: 0.15
},
yaxis3: {
title: "yaxis4 title",
titlefont: {color: "#d62728"},
tickfont: {color: "#d62728"},
anchor: "x",
overlaying: "y",
side: "right"
},
yaxis4: {
title: "yaxis5 title",
titlefont: {color: "#9467bd"},
tickfont: {color: "#9467bd"},
anchor: "free",
overlaying: "y",
side: "right",
position: 0.85
}
};
var graphOptions = {layout: layout, filename: "multiple-axes-multiple", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
console.log(msg);
});
``````