I am trying to remove empty space from (dateaxis) xAxis in amchart v5

I am trying to remove empty space from the x-axis in amchart5. But I am not able to do it. I have done the same in amchart4 which was working fine. In v4 I was using (dateAxis.skipEmptyPeriods = true; )to remove empty space and it was working fine but the same is not working in amchart5. Can anyone help?

var data=
    [{
    "Date": "2019-08-16",
    "StockSymbol": "MSFT",
    "Open": 134.88,
    "High": 136.46,
    "Low": 134.72,
    "Close": 136.13,
    "Osc_1VI": 1.800985968,
    "HeatmapTrans": 49.15369259
  },
  {
    "Date": "2019-08-19",
    "StockSymbol": "MSFT",
    "Open": 137.85,
    "High": 138.55,
    "Low": 136.89,
    "Close": 138.41,
    "Osc_1VI": 1.850338609,
    "HeatmapTrans": 48.98744781
  },
  {
    "Date": "2019-08-20",
    "StockSymbol": "MSFT",
    "Open": 138.21,
    "High": 138.71,
    "Low": 137.24,
    "Close": 137.26,
    "Osc_1VI": 1.83817469,
    "HeatmapTrans": 49.3823723
  },
  {
    "Date": "2019-08-22",
    "StockSymbol": "MSFT",
    "Open": 138.66,
    "High": 139.2,
    "Low": 136.29,
    "Close": 137.78,
    "Osc_1VI": 1.883285168,
    "HeatmapTrans": 49.57510018
  },
  {
    "Date": "2019-08-23",
    "StockSymbol": "MSFT",
    "Open": 137.19,
    "High": 138.35,
    "Low": 132.8,
    "Close": 133.39,
    "Osc_1VI": 1.871858131,
    "HeatmapTrans": 49.72754159
  }
];
    

am5.ready(function() {
var root = am5.Root.new("chartdiv");
root.setThemes([
  am5themes_Animated.new(root)
]);

var chart = root.container.children.push(am5xy.XYChart.new(root, {
  panX: true,
  panY: false,
  wheelX: "panX",
  wheelY: "zoomX", 
  layout: root.verticalLayout
}));
var valueAxisRenderer = am5xy.AxisRendererY.new(root, {
  inside: true
});
valueAxisRenderer.labels.template.setAll({
  centerY: am5.percent(100),
  maxPosition: 0.98
});
var valueAxis = chart.yAxes.push(am5xy.ValueAxis.new(root, {
  renderer: valueAxisRenderer,maxPrecision: 0,
  height: am5.percent(100)
}));
valueAxis.axisHeader.children.push(am5.Label.new(root, {
  text: "Price",
  fontWeight: "bold",
  paddingBottom: 5,
  paddingTop: 5
}));

var dateRenderer = am5xy.AxisRendererY.new(root, {
  inside: true
});
dateRenderer.labels.template.setAll({
  centerY: am5.percent(50),
  maxPosition: 0.98
});
var date = chart.yAxes.push(am5xy.ValueAxis.new(root, {  
  renderer: dateRenderer,
  height: am5.percent(70),
  layer: 5,/*min:0,max:4, strictMinMax: true,*/
  numberFormat: "#a"
}));
date.axisHeader.set("paddingTop", 10);
date.axisHeader.children.push(am5.Label.new(root, {
  text: "Close Price",
  fontWeight: "bold",
  paddingTop: 5,  
  paddingBottom: 5
}));





var dateAxisRenderer = am5xy.AxisRendererX.new(root, {});
dateAxisRenderer.labels.template.setAll({
  minPosition: 0.01,
  maxPosition: 0.99,
  minGridDistance: 30
});
var dateAxis = chart.xAxes.push(am5xy.DateAxis.new(root, {
     baseInterval: { timeUnit: "day", count: 1 },
     groupCount: 0,tooltipDateFormat: "MMM d, yyyy",
    renderer: dateAxisRenderer,
    
  
}));
dateAxis.set("tooltip", am5.Tooltip.new(root, {})); 

var color = root.interfaceColors.get("background");
var valueSeries = chart.series.push(
  am5xy.CandlestickSeries.new(root, {
    clustered:false,
    calculateAggregates: true,
    stroke: color,calculateAggregates: true,
    name: "MSFT",
    xAxis: dateAxis,
    yAxis: valueAxis,
    valueYField: "Close",
    openValueYField: "Open",
    lowValueYField: "Low",
    highValueYField: "High",
    valueXField: "Date",
    lowValueYGrouped: "Low",
    highValueYGrouped: "High",
    openValueYGrouped: "Open",
    valueYGrouped: "Close",
    legendValueText: "{StockSymbolValueY} Open: {openValueY} Low: {lowValueY} High: {highValueY} Close: {valueY}",
    legendRangeValueText: "{valueYDate}"
  })
);
    // Add series
// https://www.amcharts.com/docs/v5/charts/xy-chart/series/

var firstColor = chart.get("colors").getIndex(0);

var Osc_1VISeries = chart.series.push(am5xy.ColumnSeries.new(root, {
    name: "",
    xAxis: dateAxis,
  yAxis: date,
   /*valueYField: "Close",*/
    valueYField:"HeatmapTrans",
    valueXField: "Date",
    tooltip: am5.Tooltip.new(root, {
      labelText: "{valueY}"
    })
  })
);



    
    
    
    
Osc_1VISeries.columns.template.setAll({
  strokeOpacity: 0,
  width: am5.percent(100),
  fillOpacity: 1
});


var scrollbar = chart.set(
  "scrollbarX",
  am5xy.XYChartScrollbar.new(root, {
    orientation: "horizontal",
    height: 60
  })
);

var sbDateAxis = scrollbar.chart.xAxes.push(
 am5xy.DateAxis.new(root, {
    groupData: true,
    groupInterval: { timeUnit: "month", count: 1 },
    renderer: am5xy.AxisRendererX.new(root, {})
  })
);

var sbValueAxis = scrollbar.chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

    

    
    
var valueTooltip = valueSeries.set("tooltip", am5.Tooltip.new(root, {
  getFillFromSprite: false,
  getStrokeFromSprite: true,
  getLabelFillFromSprite: true,
  autoTextColor: false,
  pointerOrientation: "horizontal",
  labelText: "{name}: {valueY} {valueYChangePreviousPercent.formatNumber('[#00ff00]+#,###.##|[#ff0000]#,###.##|[#999999]0')}%"
}));
valueTooltip.get("background") .set("fill", root.interfaceColors.get("background"));

var valueLegend = valueAxis.axisHeader.children.push(
  am5.Legend.new(root, {
    useDefaultMarker: true
  })
);
valueLegend.data.setAll([valueSeries]);

var Osc_1VILegend = date.axisHeader.children.push(
  am5.Legend.new(root, {
    useDefaultMarker: true
  })
);
Osc_1VILegend.data.setAll([Osc_1VISeries]);

chart.leftAxesContainer.set("layout", root.verticalLayout);

chart.set("cursor", am5xy.XYCursor.new(root, {}))

var scrollbar = chart.set("scrollbarX", am5xy.XYChartScrollbar.new(root, {
  orientation: "horizontal",
  height: 50
}));

var sbDateAxis = scrollbar.chart.xAxes.push(am5xy.DateAxis.new(root, {
  groupData: true,
  groupIntervals: [{
    timeUnit: "week",
    count: 1
  }],
  baseInterval: {
    timeUnit: "day",
    count: 1
  },
  renderer: am5xy.AxisRendererX.new(root, {})
}));

var sbValueAxis = scrollbar.chart.yAxes.push(
  am5xy.ValueAxis.new(root, {
    renderer: am5xy.AxisRendererY.new(root, {})
  })
);

var sbSeries = scrollbar.chart.series.push(am5xy.LineSeries.new(root, {
  valueYField: "Close",
  valueXField: "Date",
  xAxis: sbDateAxis,
  yAxis: sbValueAxis
}));

sbSeries.fills.template.setAll({
  visible: true,
  fillOpacity: 0.3
});
    
 var processor = am5.DataProcessor.new(root, {emptyAs: 0,
    dateFields: ["Date"],
    dateFormat: "dd-MM-yyyy",
    numericFields: ["Open", "High", "Low", "Close", "HeatmapTrans", "Osc_1VI"]
  });
 
  processor.processMany(data);
  valueSeries.data.setAll(data);
  Osc_1VISeries.data.setAll(data);
  sbSeries.data.setAll(data);
  console.log(data)
 series.data.setAll(data);
    
am5.net.load("data.json").then(function(result) {
  dateAxis.data.setAll(am5.JSONParser.parse(result.response));
}).catch(function(result) {
  console.log("Error loading " + result.xhr.responseURL);
});
chart.appear(1000, 100);
});

#chartdiv {
  width: 100%;
  height: 600px;
  max-width: 100%;
}
    body
    {
        fill:#F4F5F6;
    }

<script src="https://cdn.amcharts.com/lib/5/index.js"></script>
<script src="https://cdn.amcharts.com/lib/5/xy.js"></script>
<script src="https://cdn.amcharts.com/lib/5/themes/Animated.js"></script>
<div id="chartdiv"></div>