Multiple line chart not displaying labels - chart js

For multi line chart in MVC using chart.js (dynamic)

Create a Class LabelPoint, Reference your X and Y points on the graph

so the data looks something like this   [ { Label : "ABC" , DataPoint :[ { X: '222' , Y :60 } ] } ]

It will be an array of object, in that object there will be an array of object.

//DataContract for Serializing Data - required to serve in JSON format
	[DataContract]
	public class LabelPoint
	{
		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "label")]
		public string Label { get; set; }

		public DataPoint DataPoint { get; set; }
	}
	[DataContract]
	public class DataPoint
	{
		[DataMember(Name = "x")]
		public List<string> X { get; set; }

		//Explicitly setting the name to be used while serializing to JSON.
		[DataMember(Name = "y")]
		public List<string> Y { get; set; }


	}

Controller Code
List dataPoints = detailIM
                     .GroupBy(p => p.Product,
                    (k, c) => new LabelPoint()
                    {
                        DataPoint = new DataPoint { X = c.Select(y => 
                          y.Quantity).ToList(), Y = c.Select(cs => cs.Date).ToList() },
                        Label = k
                    }
                   ).ToList();

                ViewBag.DataPoints = dataPoints;

on your cshtml, retrieve the values

var data = @Html.Raw(Json.Encode(ViewBag.DataPoints));

var dataSet = [];  var qty= []; var dates= [];
       // loop through the data and get the Label as well as get the created dates and qty for the array of object
       for (var i = 0; i < data.length; i++) {

           qty.push(data[i].DataPoint.Y);
           for (var d = 0; d < data[i].DataPoint.X.length; d++) {
               // we're setting this on the X- axis as the  label so we need to make sure that we get all the dates between searched dates
               dates.push(data[i].DataPoint.X[d]);
           }
            // we create an array of object, set the Lable which will display LocationName, The data here is the Quantity
               dataSet.push(
               {
                   label: data[i].Label,
                   data: data[i].DataPoint.Y,
                   fill: false,
                   borderColor: poolColors(qty.length),
                   pointBorderColor: "black",
                   pointBackgroundColor: "white",
                   lineTension: 0.1
               }
           );
       }
       // this is the options to set the Actual label like Date And Quantity
       var options = {
           scales: {
                xAxes: [{
                scaleLabel: {
                display: true,
                labelString: "Date",
                fontSize: 20
                 },
                 }],

           yAxes: [{
               ticks: {
                   beginAtZero:true
               },
               scaleLabel: {
                    display: true,
                    labelString: 'Quantity',
                    fontSize: 20
                }
           }]
           }
       };

// we need to remove all duplicate values from the CreatedDate array
     var uniq = [ ...new Set(dates) ];

<canvas id="myChart"></canvas>

var ctx = document.getElementById("myChart").getContext('2d');
      // build the chart
      var myChart = new Chart(ctx, {
          type: 'line',
          data: {
              labels: uniq,
              datasets:dataSet
          },
           options: options
      });

    /// will get get random colors each time
    function dynamicColors() {
    var r = Math.floor(Math.random() * 255);
    var g = Math.floor(Math.random() * 255);
    var b = Math.floor(Math.random() * 255);
    return "rgba(" + r + "," + g + "," + b + ", 0.5)";
    }

    /// will display random colors each time
    function poolColors(a) {
    var pool = [];
    for(i = 0; i < a; i++) {
        pool.push(dynamicColors());
    }
    return pool;
}