Highcharts, calculate and draw average line on columns/scatter series

Question

I use Highcharts to draw scatter series (representing different runs) on columns (representing years). I used the pointPlacement option to place the columns as I need

series: [
{
    name: "Run 1",
    type: "scatter",
    data: scatterData1,     
    pointPlacement: -0.1
    },
    {
    name: "Run 2",
    type: "scatter",
    data: scatterData2,
    pointPlacement: 0   
    },
    {
    name: "Run 3",
    type: "scatter",
    data: scatterData3,
    pointPlacement: 0.1 
    }
]

The result is here and seems to works well : https://jsfiddle.net/vegaelce/xo9uwsqy/

Now, I need to add, for each year, a line representing the average of each run. The expected result could be :

The red lines are the links between the red points (average of each run in the year).

How could I achieve that ?

Answer 1

You can use the decimal points on the x-axis in combination with lineWidth to achieve something like this.

{
  name: "Average 2017",
  type: "scatter",
  color: 'red',
  lineWidth: 1,
  marker: {
    symbol: 'dot'
  },
  showInLegend: false,
  data: [[-0.1, 48], [0, 23], [0.1, 40]]
}

Demo: https://jsfiddle.net/BlackLabel/3gcsnqjr/