# Add line over each boxplot

Hi,

Let’s start from the code here : Box plots in JavaScript

How can I do to add an horizontal line on each box plot ?

Something like this :

Thanks.

``````var y0 = [];
var y1 = [];
var x1 = []
var x2 = []
for (var i = 0; i < 50; i ++) {
y0[i] = Math.random();
y1[i] = Math.random() + 1;
x1[i] = 'aa';
x2[i] = 'bb';
}

var trace1 = {
x: x1,
y: y0,
type: 'box',
xaxis:'a',
};

var trace2 = {
x: x2,
y: y1,
type: 'box',
xaxis:'a',
};

var trace3 = {
y: [0.5,0.5],
type: 'scatter',
x: ['aa','bb'],
mode:'markers',
xaxis:'a',
marker:{size: 20, color:'red'}
}

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);
``````

Unfortunatly it’s a marker and not a line.

An other solution was to use numeric value for x and to plot a line manually giving coordinate. This works but it’s ugly.

There is probably a good way to do that but can’t find it

Found a way using error bar. Still a little ugly as I have to set width manually:

``````var y0 = [];
var y1 = [];
var x1 = []
var x2 = []
for (var i = 0; i < 50; i ++) {
y0[i] = Math.random();
y1[i] = Math.random() + 1;
x1[i] = 1;
x2[i] = 2;
}

var trace1 = {
x: x1,
y: y0,
type: 'box',
xaxis:'a',
};

var trace2 = {
x: x2,
y: y1,
type: 'box',
xaxis:'a',
};

var trace3 = {
y: [0.5,0.5],
type: 'scatter',
x: [1,2],
mode:'none',
xaxis:'a',
error_x: {
type: 'constant',
value: 0.25,
color: 'red'
}
}

var data = [trace1, trace2, trace3];

Plotly.newPlot('myDiv', data);

``````