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. Try Plotly Studio now.
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); 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);