Timeline Chart

HTML

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

JavaScript

var getScatterLabels = function(){
    return {
        enabled: true,
        align: 'center',
        style: {
            fontWeight: 'normal',
            color: 'white',
            fontSize: '8px'
        },
        x: 0,
        verticalAlign: 'middle',
        overflow: true,
        crop: false,
        formatter: function () {
            return 'X';
        }
    }
};

$(document).ready(
    


function () {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'highchart',
        },
        title: {
            text: 'Part Number 01 Removal in Last 30 Days'
        },
        subtitle: {
        text: 'PR-AZA'
        },
        xAxis: {
            type: 'datetime',
            labels: {
                formatter: function () {
                    var myDate = new Date(this.value);
                    var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth() - 1, myDate.getUTCDate());
                    return Highcharts.dateFormat('%b %e, %Y', newDateMs);
                }
            }
        },
        yAxis: [{
            title: {
                text: 'PN Removal'
            },
            min: 0,
            max: 5
        }],
        tooltip: {
            formatter: function () {
                var myDate = new Date(this.x);
                var newDateMs = Date.UTC(myDate.getUTCFullYear(), myDate.getUTCMonth() - 1, myDate.getUTCDate());
                console.log('HIGHLIGHT ROW: ' + this.point.id);
                return this.key + '<br/>' + Highcharts.dateFormat('%a %b %e, %Y', newDateMs) + '<br>Lift: ' + this.y + '%';
            }
        },
        series: [{
            type: 'scatter',
            color: '#0e5ae6', // Exposed (Blue)
            yAxis: 0,
            marker: {
                radius: 8
            },
            data: [{
                name: 'Point 1',
                x: Date.UTC(2017, 05, 10),
                y: 1,
                id: 0,
                dataLabels:...