Error Bars in JavaScript

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


New to Plotly?

Plotly is a free and open-source graphing library for JavaScript. We recommend you read our Getting Started guide for the latest installation or upgrade instructions, then move on to our Plotly Fundamentals tutorials or dive straight in to some Basic Charts tutorials.

var data = [
  {
    x: [0, 1, 2],
    y: [6, 10, 2],
    error_y: {
      type: 'data',
      array: [1, 2, 3],
      visible: true
    },
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);
Click to copy
00.511.52024681012
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'};
Plotly.newPlot('myDiv', data, layout);
Click to copy
Trial 1Trial 2Trial 302468
ControlExperimental
var data = [
  {
    x: [1, 2, 3, 4],
    y: [2, 1, 3, 4],
    error_x: {
      type: 'percent',
      value: 10
    },
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);
Click to copy
123411.522.533.54
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'
  }
];
Plotly.newPlot('myDiv', data);
Click to copy
11.522.533.541234
function linspace(a,b,n) {
  return d3.range(n).map(function(i){return a+i*(b-a)/(n-1);});
}
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]

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,
  },
  error_x: {
    type: 'constant',
    value: 0.2,
    color: '#85144B',
    thickness: 1.5,
    width: 3,
  },
  marker: {
    color: '#85144B',
    size: 8
  },
  type: 'scatter'
};
var data = [trace1, trace2];
Plotly.newPlot('myDiv', data, {}, {showSendToCloud: true});
Click to copy
−4−2024020406080100
sinc(x)measured
var data = [
  {
    x: [0, 1, 2],
    y: [6, 10, 2],
    error_y: {
      type: 'percent',
      value: 50,
      visible: true
    },
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);
Click to copy
00.511.5251015
var data = [
  {
    x: [1, 2, 3, 4],
    y: [2, 1, 3, 4],
    error_y: {
      type: 'percent',
      symmetric: false,
      value: 15,
      valueminus: 25
    },
    type: 'scatter'
  }
];
Plotly.newPlot('myDiv', data);
Click to copy
11.522.533.541234