Error Bars in Nodejs

How to add error bars to a line, scatter, or bar chart. Seven examples of symmetric, asymmetric, horizontal, and colored error bars.

Basic Symmetric Error Bars

// 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: [0, 1, 2],
    y: [6, 10, 2],
    error_y: {
      type: "data",
      array: [1, 2, 3],
      visible: true
    },
    type: "scatter"
  }
];
var graphOptions = {filename: "basic-error-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Bar Chart with Error Bars

// 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: ["Trial 1", "Trial 2", "Trial 3"],
  y: [3, 6, 4],
  name: "Control",
  error_y: {
    type: "data",
    array: [1, 0.5, 1.5],
    visible: true
  },
  type: "bar"
};
var trace2 = {
  x: ["Trial 1", "Trial 2", "Trial 3"],
  y: [4, 7, 3],
  name: "Experimental",
  error_y: {
    type: "data",
    array: [0.5, 1, 2],
    visible: true
  },
  type: "bar"
};
var data = [trace1, trace2];
var layout = {barmode: "group"};
var graphOptions = {layout: layout, filename: "error-bar-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Horizontal Error Bars

// 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, 3, 4],
    y: [2, 1, 3, 4],
    error_x: {
      type: "percent",
      value: 10
    },
    type: "scatter"
  }
];
var graphOptions = {filename: "error-bar-horizontal", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Asymmetric Error Bars

// 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, 3, 4],
    y: [2, 1, 3, 4],
    error_y: {
      type: "data",
      symmetric: false,
      array: [0.1, 0.2, 0.1, 0.1],
      arrayminus: [0.2, 0.4, 1, 0.2]
    },
    type: "scatter"
  }
];
var graphOptions = {filename: "error-bar-asymmetric-array", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Colored and Styled Error Bars

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

var linspace = require('linspace')

x_theo = linspace(-4, 4, 100)
sincx = Math.sin(x_theo) / x_theo
var x = [-3.8, -3.03, -1.91, -1.46, -0.89, -0.24, -0.0, 0.41, 0.89, 1.01, 1.91, 2.28, 2.79, 3.56]
var y = [-0.02, 0.04, -0.01, -0.27, 0.36, 0.75, 1.03, 0.65, 0.28, 0.02, -0.11, 0.16, 0.04, -0.15]

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

var trace1 = {
  x: x_theo,
  y: sincx,
  name: "sinc(x)",
  type: "scatter"
};
var trace2 = {
  x: x,
  y: y,
  mode: "markers",
  name: "measured",
  error_y: {
    type: "constant",
    value: 0.1,
    color: "#85144B",
    thickness: 1.5,
    width: 3,
    opacity: 1
  },
  error_x: {
    type: "constant",
    value: 0.2,
    color: "#85144B",
    thickness: 1.5,
    width: 3,
    opacity: 1
  },
  marker: {
    color: "#85144B",
    size: 8
  },
  type: "scatter"
};
var data = [trace1, trace2];
var graphOptions = {filename: "error-bar-style", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Error Bars as a Percentage of the y-Value

// 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: [0, 1, 2],
    y: [6, 10, 2],
    error_y: {
      type: "percent",
      value: 50,
      visible: true
    },
    type: "scatter"
  }
];
var graphOptions = {filename: "percent-error-bar", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});

Asymmetric Error Bars with a Constant Offset

// 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, 3, 4],
    y: [2, 1, 3, 4],
    error_y: {
      type: "percent",
      symmetric: false,
      value: 15,
      valueminus: 25
    },
    type: "scatter"
  }
];
var graphOptions = {filename: "error-bar-asymmetric-constant", fileopt: "overwrite"};
plotly.plot(data, graphOptions, function (err, msg) {
    console.log(msg);
});