highlight on h-axis to show current date

Question

I am working on google chart API to draw a timeline chart. I want to highlight or show image on the h-axis to represent the current date.

Please find the demo : https://plnkr.co/edit/Uff1PeGgg8DUGlpnALLV?p=preview

Below are the dates which i get dynamically from backend and i need to show image on h-axis at that particular dates.

    var date1 = new Date(2018,2,22);
    var date2 = new Date(2018,5,15);
    var date3 = new Date(2018,6,1);

js code:

angular.module('myApp', ['googlechart'])
  .controller('myController', function($scope) {
    var chart1 = {};
    chart1.type = "Timeline";
    chart1.displayed = false;
    chart1.data = {
      "cols": [{
        id: "month", 
        label: "id",
        type: "string"
      }, {
        id: "name",
        label: "Name",
        type: "string"
      }, {
        id: "date1",
        label: "start",
        type: "date"
      }, {
        id: "date2",
        label: "end",
        type: "date"
      }],
      "rows": [{
        c: [{
          v: "1004"
        }, {
          v: "Name1",
        }, {
          v: new Date(2017, 11, 11)
        }, {
          v:new Date(2018, 3, 12)
        } ]
      }, {
        c: [{
          v: "1089"
        }, {
          v: "Name2"
        }, {
           v: new Date(2018,4, 1)
         }, {
          v: new Date(2018, 4, 15)
        } ]
      } , {
        c: [{
          v: "1066"
        }, {
          v: "Name3"
        }, {
           v: new Date(2018,5, 1)
         }, {
          v: new Date(2018, 7, 15)
        } ]
      } , {
        c: [{
          v: "10"
        }, {
          v: "Name4"
        }, {
           v: new Date(2018, 7, 1)
         }, {
          v: new Date(2018, 7, 15)
        } ]
      } , {
        c: [{
          v: "june"
        }, {
          v: "Name5"
        }, {
           v: new Date(2018,6, 1)
         }, {
          v: new Date(2018, 6, 15)
        } ]
      }  ]
    };

 chart1.options = {
        timeline: {
            showRowLabels: false,
            colorByRowLabel: false,
            barLabelStyle: { fontSize: 14 ,bold:true}
        },
    colors:['#7EAE5A','#0E77B4'],
    backgroundColor: 'transparent'
    };
    //below are the 3 dates which i get dynamically and i need to show image on h-axis on that dates.
var date1 = new Date(2018,2,22);
var date2 = new Date(2018,5,15);
var date3 = new Date(2018,6,1);

     $scope.selected = function(selectedItem) {
       addMarker(new Date());
       }


    function addMarker(markerDate) {
    var baseline;
    var baselineBounds;
    var chartElements;
    var markerLabel;
    var markerLine;
    var markerSpan;
    var svg;
    var timeline;
    var timelineUnit;
    var timelineWidth;
    var timespan;

    baseline = null;
    timeline = null;
    svg = null;
    markerLabel = null;
    chartElements = container.getElementsByTagName('svg');
    if (chartElements.length > 0) {
      svg = chartElements[0];
    }
    chartElements = container.getElementsByTagName('rect');
    if (chartElements.length > 0) {
      timeline = chartElements[0];
    }
    chartElements = container.getElementsByTagName('path');
    if (chartElements.length > 0) {
      baseline = chartElements[0];
    }
    chartElements = container.getElementsByTagName('text');
    if (chartElements.length > 0) {
      markerLabel = chartElements[0].cloneNode(true);
    }
    if ((svg === null) || (timeline === null) || (baseline === null) || (markerLabel === null) ||
        (markerDate.getTime() < dateRangeStart.min.getTime()) ||
        (markerDate.getTime() > dateRangeEnd.max.getTime())) {

      return;
    }

    // calculate placement
    timelineWidth = parseFloat(timeline.getAttribute('width'));
    baselineBounds = baseline.getBBox();
    timespan = dateRangeEnd.max.getTime() - dateRangeStart.min.getTime();
    timelineUnit = (timelineWidth - baselineBounds.x) / timespan;
    markerSpan = markerDate.getTime() - dateRangeStart.min.getTime();

    // add label
    markerLabel.setAttribute('fill', '#e91e63');
    markerLabel.setAttribute('y', options.height);
    markerLabel.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan) - 4));
    markerLabel.textContent = formatDate.formatValue(markerDate);
    svg.appendChild(markerLabel);

    // add line
    markerLine = timeline.cloneNode(true);
    markerLine.setAttribute('y', 0);
    markerLine.setAttribute('x', (baselineBounds.x + (timelineUnit * markerSpan)));
    markerLine.setAttribute('height', options.height);
    markerLine.setAttribute('width', 1);
    markerLine.setAttribute('stroke', 'none');
    markerLine.setAttribute('stroke-width', '0');
    markerLine.setAttribute('fill', '#e91e63');
    svg.appendChild(markerLine);
  }
    $scope.myChart = chart1;

  });

Reference link : vertical reference line in google timeline visualization

I was referring to above link but no luck. Any inputs on how to find the exact co-ordinate to show the image or highlight on h-axis at current date and other user defined dates. The data i get is dynamic so i cannot give a constant static value to show image or highlight.