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.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI.Try Plotly Studio now.

Basic Symmetric Error Bars

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);

Bar Chart with Error Bars

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);

Horizontal Error Bars

var data = [  {    x: [1, 2, 3, 4],    y: [2, 1, 3, 4],    error_x: {      type: 'percent',      value: 10    },    type: 'scatter'  }];Plotly.newPlot('myDiv', data);

Asymmetric Error Bars

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);

Colored and Styled Error Bars

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_theovar 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});

Error Bars as a Percentage of the y-Value

var data = [  {    x: [0, 1, 2],    y: [6, 10, 2],    error_y: {      type: 'percent',      value: 50,      visible: true    },    type: 'scatter'  }];Plotly.newPlot('myDiv', data);

Asymmetric Error Bars with a Constant Offset

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);