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 :
image

Thanks.

Had to add x value (always the same) and use marker :slight_smile:

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 :frowning:

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