Ng2-Nv3d X-Axis not displayed

[PierBJX]

I am doing a scatter plot with ng2-nvd3. The data is fetch on the server. From the response I create my data and the option in order to display the chart. This works properly, however the X-Axis is equal to 0. So all the points are the Y-Axis. See the picture.

However, when I resize the windows of the browser (minimise or maximise) or I open the console browser, the chart changes and everything is alright.

Like if it was updated the layout. Maybe it is related to the callback or something like that I don't know. I tried to add detectChanges() of ChangeDetectorRef but nothing changes.

In my component.ts: Goto_PCA is a function called in the ngOnInit().

  goto_PCA(datasetId, type) {
    this.display = false;
    this.api.getPCA(datasetId, type).subscribe(
      res => {
        this.pca = res;
        console.log("PCA", this.pca);
        this.data = this.generateData(1, this.pca);
        console.log("Data", this.data);
        this.chart = this.scatterChart(false, this.pca);
        this.display = true;
        d3.redraw()
        this.cd.detectChanges();
      },
      err => {
        this.display = false;
        console.log(err);
      }
    );
  }

  // function to generate the data per group
  generateData(groups, points) {
    //# groups,# points per group
    let samples = points.sampleNames;
    points = points.pcaComponents;
    let data = [];
    for (let i = 0; i < groups; i++) {
      data.push({
        values: []
      });
      for (var j = 0; j < points.length; j++) {
        data[i].values.push({
          x: points[j][0], //PC1
          y: points[j][1], // PC2
          label: samples[j],
          shape: "circle"
        });
      }
    }
    return data;
  }

  scatterChart(legend, pca) {
    return {
      chart: {
        type: "scatterChart",
        height: 500,
        color: d3.scale.category10().range(),
        interactive: true,
        showLegend: legend,
        showLabels: false,
        scatter: {
          onlyCircles: false
        },
        showDistX: true,
        showDistY: true,
        duration: 500,
        xAxis: {
          axisLabel: "PC1 (" + pca.variance[0] + "%)",
          tickFormat: function(d) {
            return d3.format(".3g")(d);
          }
        },
        yAxis: {
          axisLabel: "PC2 (" + pca.variance[1] + "%)",
          tickFormat: function(d) {
            return d3.format(".3g")(d);
          },
          axisLabelDistance: -5
        }
      }
    };
  }

And in my HTML:

<nvd3 [options]="chart" [data]="data"></nvd3>

[gauravjain811]

Try using below code, solved my problem of x-axis consistent dates- xAxis: { axisLabel: '', tickValues: function(d){ var between = []
var secondDate = d[0].values[d[0].values.length-1].date; var firstDate = d[0].values[0].date;

      //get all dates between max and min date
      while (firstDate <= secondDate) {
          between.push(new Date(firstDate));
          firstDate.setDate(firstDate.getDate() + 4);
      }

  return between;
     },       

    showMaxMin: false,
    rotateLabels: -90,
    tickFormat: function (d) {
      return d3.time.format('%m/%d/%y ')(new Date(d));
    }
  }