[Solved]-How do I customize y-axis labels and randomly pick the value from the data range for x-axis in Chart js-Chart.js

You need to use a scatter chart and define the option showLine: true on each dataset. Further you have to define the y-axis as a time cartesian axis as follows.

yAxes: [
  {
    type: "time",
    time: {
      parser: "YYYY/MM/DD",
      unit: "day",
      displayFormats: {
        day: "YYYY/MM/DD"
      }
    },
    ticks: {
      reverse: true
    }       
  }
]

Since the scatter chart expects the data in point format, you have to generate appropriate data structure in the ngOnInit method as follows:

ngOnInit() {
  this.lineChartData.forEach(ds => {
    ds.data = ds.data.map((v, i) => ({ x: v, y:  this.lineChartLabels[i] }));
  });
}

Also remove [labels]="lineChartLabels" from the canvas, this is not needed when defining the data in point format.

Unfortunately however ng2-charts can't cope with this configuration and displays wrong colors for the data points and the legend labels. Therefore I also had to remove [colors]="lineChartColors" from the canvas and define the colors on the datasets. You'll probably have to get rid of this wrapper library and use Chart.js directly in order to obtain the expected result.

Please take a look at your amended code in this StackBlitz.