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. Sign up for early access now.
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);
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);
var data = [
{
x: [1, 2, 3, 4],
y: [2, 1, 3, 4],
error_x: {
type: 'percent',
value: 10
},
type: 'scatter'
}
];
Plotly.newPlot('myDiv', data);
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);
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});
var data = [
{
x: [0, 1, 2],
y: [6, 10, 2],
error_y: {
type: 'percent',
value: 50,
visible: true
},
type: 'scatter'
}
];
Plotly.newPlot('myDiv', data);
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);
