Align label and the marker on the same vertical line(Highcharts)

Question

I want to add a dash like in the red circle from the first point(blue). Is it possible? Here is my code

function graph(graph_id, value_array,tool_tip_title, max, min){
        $('#'+graph_id).highcharts({

            chart: {
                type: 'areaspline',
                backgroundColor:'transparent'
            },
            title: {
                text: false
            },
            xAxis: {
                type: 'datetime',
                labels: {
                    formatter: function() {
                       return moment(this.value).format("HH:mm:ss");
                   }
               }
           },
           yAxis: {
            title: {
                text: false
            },
            gridLineColor: 'transparent',
            labels:{enabled: true},
            gridLineWidth: 0,
            minorGridLineWidth: 0,
            min: min,
            max: max

        },
        tooltip: {
            shared: true
        },
        credits: {
            enabled: false
        },
        plotOptions: {
            areaspline: {
                fillOpacity: 1
            },
            series: {
            tooltip: {
                dateTimeLabelFormats: {
                    second:"%A, %b %e, %H:%M:%S"
                }
            },
             marker: {
                fillColor: '#3D84B1',
                lineWidth: 2,
                lineColor: 'white',
                radius: 6

            }
        }
    },
    series: [{
        showInLegend: false,
        name: tool_tip_title,
        color: "#EC615F",
        data: value_array
    }]
});
}

I have also tried setting up the startOnTick to true and min to the least dateTime of x axis but nothing is happening.

Answer 1

Highcharts by default calculates some nice dates and sometimes the first possible label/datapoint is not fitting into that 'nice labels' algorithm. In case you want to display specific labels, use xAxis.tickPositioner . In your case, I think you can simply add two extra dates, like this:

tickPositioner: function() {
  var tp = this.tickPositions;           // get default positions

  tp.splice(0, 1, this.min);             // replace first label
  tp.splice(tp.length - 1, 1, this.max); // replace last label

  return tp;
}

Simple demo: http://jsfiddle.net/p98rggva/

Answer 2

you can use startOnTick and min as per your minimum data.

startOnTick: true,
min:  your smallest data of xAxis/in date use first timestamp of sorted data