highcharts line not showing properly

Question

I'm creating some visualisations using HightCharts. Thought series only for a specific year I automatically draw a line between actual value for the bar and the result-target.

I draw the line in this way:

{
      dashStyle: 'dash',
      lineWidth: 2,
      shadow: false,
      zIndex: 2,
      color: '#000e3e',
      data: [[0, 5], [3,3]],
        name: 'Line for Project 2 - Results'

    }

on the data part I specify to start from column 0 which is first year and 3 which is the Results.

The problem is that in HightCharts when there's more than one value for a year the line doesn't start from the top of the bar but from the middle.

[![enter image description here][1]][1]

Is there any possible way to start drawing line from the top of the bar?

Here's the JS FIDDLE

 Highcharts.chart('container', { title: { text: 'Combination chart' }, xAxis: { categories: ['2014', '2015', '2016', 'Results'] }, series: [{ type: 'column', name: 'Project 1', data: [10, 4, 1] }, { type: 'column', name: 'Project 2', data: [5, 4, 5] }, { type: 'column', name: 'Project 3', data: [2,8, 3] },{ dashStyle: 'dash', lineWidth: 2, shadow: false, zIndex: 2, color: '#000e3e', data: [[0, 10], [3,5]], name: 'Line for Project 1 - Results' },{ dashStyle: 'dash', lineWidth: 2, shadow: false, zIndex: 2, color: '#000e3e', data: [[0, 5], [3,3]], name: 'Line for Project 2 - Results' },{ dashStyle: 'dash', lineWidth: 2, shadow: false, zIndex: 2, color: '#000e3e', data: [[0, 2], [3,0]], name: 'Line for Project 3 - Results' }] }); 

 <script src="https://code.highcharts.com/highcharts.js"></script> <script src="https://code.highcharts.com/modules/series-label.js"></script> <script src="https://code.highcharts.com/modules/exporting.js"></script> <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> 

Answer 1

The easiest way to achieve effect you need is by setting the x values of your line series data to floating point number values, instead of integers, for example equal to 0.2 or -0.2. Please take a look on code below:

{
  dashStyle: 'dash',
  lineWidth: 2,
  shadow: false,
  zIndex: 2,
  color: '#000e3e',
  data: [[-0.2, 10], [3,5]],
    name: 'Line for Project 1 - Results'
}

I prepared a JSFiddle example to show you how it looks.

Best regards!