Plotly is free for unlimited public use. Sign up for free!

Sensitive data? Upgrade to a paid plan

Show Sidebar Hide Sidebar
Node.js

Multiple Axes in Nodejs

How to make a graph with multiple axes in nodejs.

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

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

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);
});
// Learn about API authentication here: https://plot.ly/nodejs/getting-started
// Find your api_key here: https://plot.ly/settings/api

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

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);
});
Still need help?
Contact Us

For guaranteed 24 hour response turnarounds, upgrade to a Developer Support Plan.