Axes in Nodejs

How to adjust axes properties in nodejs. Seven examples of linear and logarithmic axes, axes titles, and styling and coloring axes and grid lines.

Tick Placement, Color, and Style

// 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, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    autotick: false,
    ticks: "outside",
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: "#000"
  },
  yaxis: {
    autotick: false,
    ticks: "outside",
    tick0: 0,
    dtick: 0.25,
    ticklen: 8,
    tickwidth: 4,
    tickcolor: "#000"
  }
};
var graphOptions = {layout: layout, filename: "axes-ticks", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Reversed 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 data = [
  {
    x: [1, 2],
    y: [1, 2],
    type: "scatter"
  }
];
var layout = {xaxis: {autorange: "reversed"}};
var graphOptions = {layout: layout, filename: "axes-reversed", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Logarithmic 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: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    type: "log",
    autorange: true
  },
  yaxis: {
    type: "log",
    autorange: true
  }
};
var graphOptions = {layout: layout, filename: "axes-range-type", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

`nonnegative`, `tozero`, and `normal` Rangemode

// 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 data = [
  {
    x: [2, 4, 6],
    y: [-3, 0, 3],
    type: "scatter"
  }
];
var layout = {
  showlegend: false,
  xaxis: {
    rangemode: "tozero",
    autorange: true
  },
  yaxis: {
    rangemode: "nonnegative",
    autorange: true
  }
};
var graphOptions = {layout: layout, filename: "axes-range-mode", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Setting the Range of Axes Manually

// 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, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {range: [2, 5]},
  yaxis: {range: [2, 5]}
};
var graphOptions = {layout: layout, filename: "axes-range-manual", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Styling and Coloring Axes and the Zero-Line

// 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, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    showgrid: true,
    zeroline: true,
    showline: true,
    mirror: "ticks",
    gridcolor: "#bdbdbd",
    gridwidth: 2,
    zerolinecolor: "#969696",
    zerolinewidth: 4,
    linecolor: "#636363",
    linewidth: 6
  },
  yaxis: {
    showgrid: true,
    zeroline: true,
    showline: true,
    mirror: "ticks",
    gridcolor: "#bdbdbd",
    gridwidth: 2,
    zerolinecolor: "#969696",
    zerolinewidth: 4,
    linecolor: "#636363",
    linewidth: 6
  }
};
var graphOptions = {layout: layout, filename: "axes-lines", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Set and Style Axes Title Labels and Ticks

// 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, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    title: "AXIS TITLE",
    titlefont: {
      family: "Arial, sans-serif",
      size: 18,
      color: "lightgrey"
    },
    showticklabels: true,
    tickangle: 45,
    tickfont: {
      family: "Old Standard TT, serif",
      size: 14,
      color: "black"
    },
    exponentformat: "e",
    showexponent: "All"
  },
  yaxis: {
    title: "AXIS TITLE",
    titlefont: {
      family: "Arial, sans-serif",
      size: 18,
      color: "lightgrey"
    },
    showticklabels: true,
    tickangle: 45,
    tickfont: {
      family: "Old Standard TT, serif",
      size: 14,
      color: "black"
    },
    exponentformat: "e",
    showexponent: "All"
  }
};
var graphOptions = {layout: layout, filename: "axes-labels", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Toggling Axes Lines, Ticks, Labels, and Autorange

// 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, 3, 4, 5, 6, 7, 8],
  y: [8, 7, 6, 5, 4, 3, 2, 1, 0],
  type: "scatter"
};
var trace2 = {
  x: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  y: [0, 1, 2, 3, 4, 5, 6, 7, 8],
  type: "scatter"
};
var data = [trace1, trace2];
var layout = {
  xaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    autotick: true,
    ticks: "",
    showticklabels: false
  },
  yaxis: {
    autorange: true,
    showgrid: false,
    zeroline: false,
    showline: false,
    autotick: true,
    ticks: "",
    showticklabels: false
  }
};
var graphOptions = {layout: layout, filename: "axes-booleans", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});