Milestones Scatter

HTML

<script src="http://www.highcharts.com/js/highcharts.js"></script>
<div id="container" style="height: 220px; margin:40px;"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>

JavaScript

var chart;

chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type: 'scatter',
  plotBackgroundColor: {
            linearGradient: [0, 0, 0, 500],
            stops: [
                [0, 'rgb(255, 255, 255)'],
                [1, 'rgb(240, 240, 240)']
            ]
        }        
    },
    credits: {
        enabled: false
    },
    title: null,    
    legend: {
        enabled: false
    },
    
    xAxis: {
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%e. %b',
            year: '%b'
        },
         //  startOnTick: true,
        // tickInterval: 50,
         // gridLineDashStyle : 'ShortDash',
        gridLineWidth: 1,
        labels: {
            formatter: function() {
                return Highcharts.dateFormat('%a %d %b', this.value);
            },
            rotation: 270,
            y: 40,
            x: -3
            //staggerLines : 2
        },
        tickPositions: [Date.UTC(1970, 9, 27), Date.UTC(1970, 10, 1), Date.UTC(1970, 10, 12), Date.UTC(1970, 10, 27), Date.UTC(1970, 12, 27)],
        plotLines: [{
            color: '#f00',
            width: 1,
            value: Date.UTC(1970, 10, 40),
            label: "Today",
          dashStyle: 'ShortDash'}]

    },
    yAxis: {
        gridLineWidth: 0,
        labels: {
            enabled: false
        },
        title: "",
        tickPositions: [-0.2]
    },
    tooltip: {
        formatter: function() {
            return '<b>' + this.point.name + '</b><br/>' + Highcharts.dateFormat('%e. %b', this.x);
        }
    },
    series: [{
        name: 'Milestones',
        dataLabels: {
            enabled: true,
            rotation: 270,
            align: 'left',
            formatter: function() {
                return this.point.name;
            },
            x: -3
        },
         marker: {
            symbol: 'circle',
                fillColor: '#fff',
               ...