score:1

Accepted answer

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


Related Query

More Query from same tag