ScatterPlot ng2-nvd3 big black circle

Question

I am using ng2-nvd3 to plot a scatter. I fetch the data and create the data object in the good format. Then I create the option to display the chart. The points are properly displayed but I have big black circle instead of having normal circle. See the picture

And I would like to have this:

I don't know where does it come from. My code in my component: To generate the data

  generateData(groups, points) {
    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],
          size: Math.random(),
          shape: "circle"
        });
      }
    }
    return data;
  }

To generate the option

scatterChart(pca) {
    return {
      chart: {
        type: "scatterChart",
        height: 450,
        color: d3.scale.category10().range(),
        interactive: true,
        showLegend: false,
        showLabels: false,
        scatter: {
          onlyCircles: false
        },
        showDistX: true,
        showDistY: true,
        duration: 350,
        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
        }
      }
    };
  }

Then in the HTML:

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