Continuous Error Bars in JavaScript

How to add D3.js-based continuous error bars to a line, scatter, or bar chart.

Plotly Studio: Transform any dataset into an interactive data application in minutes with AI. Sign up for early access now.

Filled Lines

var trace1 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
  y: [2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 9, 8, 7, 6, 5, 4, 3, 2, 1, 0], 
  fill: "tozerox", 
  fillcolor: "rgba(0,100,80,0.2)", 
  line: {color: "transparent"}, 
  name: "Fair", 
  showlegend: false, 
  type: "scatter"
};
var trace2 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
  y: [5.5, 3, 5.5, 8, 6, 3, 8, 5, 6, 5.5, 4.75, 5, 4, 7, 2, 4, 7, 4.4, 2, 4.5], 
  fill: "tozerox", 
  fillcolor: "rgba(0,176,246,0.2)", 
  line: {color: "transparent"}, 
  name: "Premium", 
  showlegend: false, 
  type: "scatter"
};
var trace3 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 9, 8, 7, 6, 5, 4, 3, 2, 1], 
  y: [11, 9, 7, 5, 3, 1, 3, 5, 3, 1, -1, 1, 3, 1, -0.5, 1, 3, 5, 7, 9], 
  fill: "tozerox", 
  fillcolor: "rgba(231,107,243,0.2)", 
  line: {color: "transparent"}, 
  name: "Ideal", 
  showlegend: false, 
  type: "scatter"
};
var trace4 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
  y: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
  line: {color: "rgb(0,100,80)"}, 
  mode: "lines", 
  name: "Fair", 
  type: "scatter"
};
var trace5 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
  y: [5, 2.5, 5, 7.5, 5, 2.5, 7.5, 4.5, 5.5, 5], 
  line: {color: "rgb(0,176,246)"}, 
  mode: "lines", 
  name: "Premium", 
  type: "scatter"
};
var trace6 = {
  x: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10], 
  y: [10, 8, 6, 4, 2, 0, 2, 4, 2, 0], 
  line: {color: "rgb(231,107,243)"}, 
  mode: "lines", 
  name: "Ideal", 
  type: "scatter"
};
var data = [trace1, trace2, trace3, trace4, trace5, trace6];
var layout = {
  paper_bgcolor: "rgb(255,255,255)", 
  plot_bgcolor: "rgb(229,229,229)", 
  xaxis: {
    gridcolor: "rgb(255,255,255)", 
    range: [1, 10], 
    showgrid: true, 
    showline: false, 
    showticklabels: true, 
    tickcolor: "rgb(127,127,127)", 
    ticks: "outside", 
    zeroline: false
  }, 
  yaxis: {
    gridcolor: "rgb(255,255,255)", 
    showgrid: true, 
    showline: false, 
    showticklabels: true, 
    tickcolor: "rgb(127,127,127)", 
    ticks: "outside", 
    zeroline: false
  }
};
Plotly.newPlot('myDiv', data, layout);

Asymmetric Error Bars with a Constant Offset

function random_date(start, end, mul)
  {
    return new Date(start.getTime() + mul * (end.getTime() - start.getTime()));
  }

function date_list(y1,m1,d1,y2,m2,d2,count)
  {
    var a =[];
    for(i=0;i<count;i++)
    {
      a.push(random_date(new Date(y1, m1, d1), new Date(y2,m2,d2),i));
    }
      return a;
  }

function random_number(num , mul)
  {
     var value = [ ];
     for(i=0;i<=num;i++)
      {
        var rand = Math.random() * mul;
        value.push(rand);
      }
     return value;
  }

var trace1 = {
  x: date_list(2001,01,01,2001,02,01,50),
  y: random_number(50,20),
  line: {width: 0},
  marker: {color: "444"},
  mode: "lines",
  name: "Lower Bound",
  type: "scatter"
};

var trace2 = {
  x: date_list(2001,01,01,2001,02,01,50),
  y: random_number(50,21),
  fill: "tonexty",
  fillcolor: "rgba(68, 68, 68, 0.3)",
  line: {color: "rgb(31, 119, 180)"},
  mode: "lines",
  name: "Measurement",
  type: "scatter"
};

var trace3 = {
  x: date_list(2001,01,01,2001,02,01,50),
  y: random_number(50,22),
  fill: "tonexty",
  fillcolor: "rgba(68, 68, 68, 0.3)",
  line: {width: 0},
  marker: {color: "444"},
  mode: "lines",
  name: "Upper Bound",
  type: "scatter"
}

var data = [trace1, trace2, trace3];
var layout = {
  showlegend: false,
  title: {
    text: "Continuous, variable value error bars<br>Notice the hover text!"
  },
  yaxis: {
    title: {
      text: "Wind speed (m/s)"
    }
  }
};
Plotly.newPlot('myDiv', data, layout);