Gap shown between true data line and predicted data line

[MinhChauVanNguyen]

I have two issues associated with dygraph that I desperately need help with.

1. In terms of the data used for the dygraph, the true data finishes at January 2019 and the predicted data starts at February 2019 but somehow there is a huge gap shown between the two series. Is it possible to remove or reduce the gap between the true data series and predicted data series as shown in the screenshots below?

The code used to make the dygraph is

 dygraph(graph, main = title, ylab = "Monthly Visitors") %>%
    dySeries(name = "actuals", fillGraph = TRUE) %>%
    dySeries(name = "pointfc_mean", label = "forecast", fillGraph = TRUE) %>%
    dySeries(name = c("lower_30", "pointfc_mean", "upper_30"), label = "30% PI") %>%
    dySeries(name = c("lower_50", "pointfc_mean", "upper_50"), label = "50% PI") %>%
    dySeries(name = c("lower_70", "pointfc_mean", "upper_70"), label = "70% PI") %>%
    dyAxis("y", valueFormatter = interval_value_formatter, label = "Monthly Vistors (thousands)") %>%
    dyAxis("x", axisLabelFormatter = 'function(d){ var month = d.getMonth().toString().fontsize(2) ;var year = d.getFullYear().toString().fontsize(2); return  year}',
           label = "Year") %>%
    dyOptions(labelsKMB = "K", axisLineColor = "navy", gridLineColor = "grey", 
              digitsAfterDecimal = 1, strokeWidth = 2) %>%
    dyRangeSelector(dateWindow = NULL, height = 20,
                    fillColor = "#99CCFF", strokeColor = "#99CCFF", keepMouseZoom = TRUE,
                    retainDateWindow = FALSE) %>%
    dyLegend(labelsDiv = id, labelsSeparateLines = TRUE, show = "always") %>%
    dyHighlight(highlightCircleSize = 5, 
                highlightSeriesBackgroundAlpha = 1,
                hideOnMouseOut = FALSE)  

2. The second issue is not so much of a package related issue so please ignore if it is inappropriate. As you could see in the second screenshot attached above, the legend is showing the data values ONLY when the user hovers over the graph. I am presenting this dygraph in a Shiny dashboard and I would like the user to be able to see the legend showing the data values as soon as they open the dashboard, i.e. without hovering over the graph (as shown in the second screenshot), instead of just seeing a legend with no values (as shown below). How do I manipulate dyHighlight into highlighting a data point permanently so that my dygraph legend isn't just showing the label series?

Reference : https://stackoverflow.com/questions/53816241/dygraph-highlight-specific-data-point-permanently

My attempt:

dyCallbacks(underlayCallback = JS("function(canvas, area, g) {
                 // Convert data co-ordinates to canvas co-ordinates
                  var xPoint = g.toDomXCoord('Jan 2018');
               var yPoint = g.toDomYCoord(12900);          
                 // Draw a red circle
                  canvas.fillStyle = 'rgba(255, 0, 0, 1)';
                  canvas.beginPath();
                  canvas.arc(xPoint, yPoint, 20, 0, 2 * Math.PI, false);
                  canvas.fill();
               }"))

Thanks in advance!