Points inside CanvasJS Graph are existing but invisible

Question

I am building a web-application which is supposed to show sensor data. it recieves the sensordata via a websocket. A component subscribes to the websocket, on notify() the observer pushes the correct values into an Array which is afterwards (supposed to be) rendered onto the graph. But when the render() function is called, there are no points showing up inside the graph.

When I insert a point/points into the dataPoints[] array before the component recieves any data, the point does show up. For example if i insert array of random points into the array in the ngOnInit() funciton.

But as soon as data arrives via websocket all the otherpoints dissapear and the recieved points are invisible. I know they are there, because if you hover over them, their coordinates are shown, but they are as white as the background

The following shows the callback function where i insert the values into the dataPoints array (which is declared at beginning of file)

//this is where the component subscribes to the websocket and 
wsSubscription = this.wsService.getObservableWebsocket().subscribe(
      data => {

        this.messageAsObject = JSON.parse(data);
        this.dataPoints.push({x: this.messageAsObject.Content[6],y: this.messageAsObject.Content[8]});
        // correct values are pushed into the dataPoints array 

        this.chart.render();
        //it does render but points are invisible
      },
      err => console.log(err),
      () => console.log("observable stream is over")
     );


  ngOnInit() {          
//example values would be inserted here

  this.chart = new CanvasJS.Chart("chartContainer2", 
  {
    theme : "light1",
    zoomEnabled: true,
    zoomType: "xy",
        animationEnabled: true,
        exportEnabled: true,
        title: {
            text: "XZ Distance"
        },
        subtitles:[{
            text: ""
        }],
        data: [
        {
            type: "line",                
            dataPoints: this.dataPoints
    }],
    axisX:{
      title:"X Value",
      minimum: -50,
      maximum: 50,
      gridColor:"black",
      gridThickness: 1    ,
      crosshair : {
        enabled: true,
      },
    },
    axisY:{
      title:"Z Value",
      minimum: -50,
      maximum: 50,
      gridColor:"black",
      gridThickness: 1    ,
      crosshair : {
        enabled: true,
      }
      }

    });

  this.chart.render();
}

what did I do wrong ?

Answer 1

There is nothing particularly wrong with the code it self. The problem were the points i tried to insert. The values were between 0.00000005m upto 300m, but CanvasJS is only able to show points over 0.2m