Прототип свечи AmChart с Angular

Question

Я попытался построить свечной график с помощью AmChart 4 с Angular на основе ответа JSON, поступающего из springboot2 api. (Пример: https://www.amcharts.com/demos/stock-chart-candlesticks/) Но похоже, что данные из JSON не вводятся, а возвращается пустая диаграмма без каких-либо дополнительных ошибок, указанных в инструменте разработчика. Есть идеи, где что-то пойдет не так?

JSON строка из URL-адреса: http://localhost: 8080 / api / Candlestick /

"data": [{"date":"20200506  05:15:00","open":1.08416,"high":1.084445,"low":1.083665,"close":1.08435,"volume":-1},{"date":"20200506  05:16:00","open":1.08435,"high":1.084365,"low":1.08434,"close":1.08434,"volume":-1},{"date":"20200506  05:17:00","open":1.08434,"high":1.0844,"low":1.084175,"close":1.084315,"volume":-1},{"date":"20200506  05:18:00","open":1.08435,"high":1.084365,"low":1.08434,"close":1.08434,"volume":-1},{"date":"20200506  05:19:00","open":1.08434,"high":1.0844,"low":1.084175,"close":1.084315,"volume":-1}]

payload.png

app.component.ts код:

      let chart = am4core.create("chartdiv", am4charts.XYChart);
      chart.padding(0, 15, 0, 15);

      // Load data
      chart.dataSource.url = "http://localhost:8080/api/candlestick/";
      chart.dataSource.parser = new am4core.JSONParser;
      chart.dataSource.parser.options.emptyAs = 0;
      //chart.dataSource.parser.options.useColumnNames = true;
      //chart.dataSource.parser.options.reverse = true;

      // the following line makes value axes to be arranged vertically.
      chart.leftAxesContainer.layout = "vertical";

      // uncomment this line if you want to change order of axes
      //chart.bottomAxesContainer.reverseOrder = true;

      let dateAxis = chart.xAxes.push(new am4charts.DateAxis());
      dateAxis.renderer.grid.template.location = 0;
      dateAxis.renderer.ticks.template.length = 8;
      dateAxis.renderer.ticks.template.strokeOpacity = 0.1;
      dateAxis.renderer.grid.template.disabled = true;
      dateAxis.renderer.ticks.template.disabled = false;
      dateAxis.renderer.ticks.template.strokeOpacity = 0.2;
      dateAxis.renderer.minLabelPosition = 0.01;
      dateAxis.renderer.maxLabelPosition = 0.99;
      dateAxis.keepSelection = true;
      dateAxis.minHeight = 30;

      dateAxis.groupData = true;
      dateAxis.minZoomCount = 5;

      // these two lines makes the axis to be initially zoomed-in
      // dateAxis.start = 0.7;
      // dateAxis.keepSelection = true;

      let valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis.tooltip.disabled = true;
      valueAxis.zIndex = 1;
      valueAxis.renderer.baseGrid.disabled = true;
      // height of axis
      valueAxis.height = am4core.percent(65);

      valueAxis.renderer.gridContainer.background.fill = am4core.color("#000000");
      valueAxis.renderer.gridContainer.background.fillOpacity = 0.05;
      valueAxis.renderer.inside = true;
      valueAxis.renderer.labels.template.verticalCenter = "bottom";
      valueAxis.renderer.labels.template.padding(2, 2, 2, 2);

      //valueAxis.renderer.maxLabelPosition = 0.95;
      valueAxis.renderer.fontSize = "0.8em"

      let series = chart.series.push(new am4charts.CandlestickSeries());
      series.dataFields.dateX = "date";
      series.dataFields.openValueY = "open";
      series.dataFields.valueY = "close";
      series.dataFields.lowValueY = "low";
      series.dataFields.highValueY = "high";
      series.clustered = false;
      series.tooltipText = "open: {openValueY.value}\nlow: {lowValueY.value}\nhigh: {highValueY.value}\nclose: {valueY.value}";
      series.name = "Hang Seng INdex Future";
      series.defaultState.transitionDuration = 0;

      let valueAxis2 = chart.yAxes.push(new am4charts.ValueAxis());
      valueAxis2.tooltip.disabled = true;
      // height of axis
      valueAxis2.height = am4core.percent(35);
      valueAxis2.zIndex = 3
      // this makes gap between panels
      valueAxis2.marginTop = 30;
      valueAxis2.renderer.baseGrid.disabled = true;
      valueAxis2.renderer.inside = true;
      valueAxis2.renderer.labels.template.verticalCenter = "bottom";
      valueAxis2.renderer.labels.template.padding(2, 2, 2, 2);
      //valueAxis.renderer.maxLabelPosition = 0.95;
      valueAxis2.renderer.fontSize = "0.8em"

      valueAxis2.renderer.gridContainer.background.fill = am4core.color("#000000");
      valueAxis2.renderer.gridContainer.background.fillOpacity = 0.05;

      let series2 = chart.series.push(new am4charts.ColumnSeries());
      series2.dataFields.dateX = "date";
      series2.clustered = false;
      series2.dataFields.valueY = "volume";
      series2.yAxis = valueAxis2;
      series2.tooltipText = "{valueY.value}";
      series2.name = "Volume Traded";
      // volume should be summed
      series2.groupFields.valueY = "sum";
      series2.defaultState.transitionDuration = 0;

      chart.cursor = new am4charts.XYCursor();

      let scrollbarX = new am4charts.XYChartScrollbar();

      let sbSeries = chart.series.push(new am4charts.LineSeries());
      sbSeries.dataFields.valueY = "close";
      sbSeries.dataFields.dateX = "date";
      scrollbarX.series.push(sbSeries);
      sbSeries.disabled = true;
      scrollbarX.marginBottom = 20;
      chart.scrollbarX = scrollbarX;
      scrollbarX.scrollbarChart.xAxes.getIndex(0).minHeight = undefined;