Mean Markers in Boxplot with multiple series - highcharts

Question

I have a boxplot with multiple series. I want to add a mean marker to the boxplot. With a single series, I can use a scatter to draw the mean on top of the boxplot. With multiple series, the means end up in the center of the group.
What's the best way to get the dots in the correct place? Bonus points for adding the mean to the tool-tip for the boxplot.
Modified from the standard example:
Highcharts.chart('container', {
chart: {
type: 'boxplot'
},
title: {
text: 'Highcharts Box Plot Example'
},
legend: {
enabled: false
},
xAxis: {
categories: ['1', '2', '3', '4', '5'],
title: {
text: 'Experiment No.'
}
},
yAxis: {
title: {
text: 'Observations'
}
},
series: [{
name: 'S1',
data: [
[755, 811, 838, 885, 955],
[725, 863, 930, 980, 1050],
[704, 752, 827, 870, 915],
[714, 812, 825, 871, 945],
[780, 826, 852, 882, 950]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'S2',
data: [
[760, 801, 848, 895, 965],
[733, 853, 939, 980, 1080],
[714, 762, 817, 870, 918],
[724, 802, 816, 871, 950],
[775, 836, 864, 882, 970]
],
tooltip: {
headerFormat: '<em>Experiment No {point.key}</em><br/>'
}
},
{
name: 'Means 1',
color: Highcharts.getOptions().colors[0],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 850],
[1, 935],
[2, 825],
[3, 840],
[4, 850]
],
marker: {
fillColor: Highcharts.getOptions().colors[0],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[0]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
},
{
name: 'Means 2',
color: Highcharts.getOptions().colors[1],
type: 'scatter',
data: [ // x, y positions where 0 is the first category
[0, 860],
[1, 945],
[2, 805],
[3, 850],
[4, 860]
],
marker: {
fillColor: Highcharts.getOptions().colors[1],
symbol: 'diamond',
lineWidth: 1,
lineColor: Highcharts.getOptions().colors[1]
},
tooltip: {
pointFormat: 'Mean: {point.y}'
}
}
]
});
Producing this:

Answer 1

The simplest solution seems to be:
disable grouping
define points positions by setting x values as decimal numbers
define boxplot size by pointPadding
instead of scatter use line series with lineWidth: 0 (to shared tooltip work properly)
enable shared tooltip
tooltip: {
shared: true
},
plotOptions: {
series: {
grouping: false,
pointRange: 1,
pointPadding: 0.4,
groupPadding: 0,
states: {
hover: {
lineWidthPlus: 0
}
}
}
},
series: [{
data: [
[-0.2, 755, 811, 838, 885, 955],
[0.8, 725, 863, 930, 980, 1050],
[1.8, 704, 752, 827, 870, 915],
[2.8, 714, 812, 825, 871, 945],
[3.8, 780, 826, 852, 882, 950]
],
...
},
{
data: [
[0.2, 760, 801, 848, 895, 965],
[1.2, 733, 853, 939, 980, 1080],
[2.2, 714, 762, 817, 870, 918],
[3.2, 724, 802, 816, 871, 950],
[4.2, 775, 836, 864, 882, 970]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [ // x, y positions where 0 is the first category
[-0.2, 850],
[0.8, 935],
[1.8, 825],
[2.8, 840],
[3.8, 850]
],
...
},
{
type: 'line',
lineWidth: 0,
data: [
[0.2, 860],
[1.2, 945],
[2.2, 805],
[3.2, 850],
[4.2, 860]
],
...
}
]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4947/
API Reference:
https://api.highcharts.com/highcharts/series.line.states.hover.lineWidthPlus
https://api.highcharts.com/highcharts/series.boxplot.grouping
https://api.highcharts.com/highcharts/tooltip.shared