Mean Markers in Boxplot with multiple series

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