ChartJs implementation to demonstrate Stacked Area Graph data representation, categorised by date

Charjs-StackedAreaGraph.js

// Working code https://codepen.io/NishiBangar/pen/gORbmrp

<!-- HTML CODE -->
<canvas id="myChart" width="400" height="100"></canvas>


// Angular code 
const colors = {
      green: {
        fill: 'rgb(0,128,0,0.2)',
        stroke: 'green',
      },
      grey: {
        fill: 'rgb(128,128,128, 0.2)',
          stroke: 'grey',
      },
      red: {
        fill: 'rgba(255, 0, 0, 0.2)',
        stroke: 'red',
      }
};

const data1 = [
        {x: "2030-08-03", y: 8},
        {x: "2030-08-04", y: 1},
        {x: "2030-08-08", y: 2},
        {x: "2030-08-09", y: 10},
        {x: "2030-08-10", y: 2},
        {x: "2030-08-12", y: 34} ];

const data2 = [{ x: '2021-08-25T12:45:04', y: 100},
                    { x: '2021-08-25T12:46:24', y: 200},
                    { x: '2021-08-25T12:46:24', y: 100},
                    { x: '2021-08-25T12:47:24', y: 300}];

const data3 = [
{x: 1629879082000, y: 100, status: 100, request: "Wed Aug 25 2021 13:41:22 GMT+0530 (India Standard Time)"},
{x: 1629879103000, y: 200, status: 100, request: "Wed Aug 25 2021 13:41:43 GMT+0530 (India Standard Time)"},
{x: 1629879123000, y: 100, status: 100, request: "Wed Aug 25 2021 13:42:03 GMT+0530 (India Standard Time)"},
{x: 1629879143000, y: 500, status: 100, request: "Wed Aug 25 2021 13:42:23 GMT+0530 (India Standard Time)"},
{x: 1629879163000, y: 100, status: 100, request: "Wed Aug 25 2021 13:42:43 GMT+0530 (India Standard Time)"},
{x: 1629879183000, y: 300, status: 100, request: "Wed Aug 25 2021 13:43:03 GMT+0530 (India Standard Time)"},
{x: 1629879203000, y: 100, status: 100, request: "Wed Aug 25 2021 13:43:23 GMT+0530 (India Standard Time)"},
{x: 1629879223000, y: 200, status: 100, request:" Wed Aug 25 2021 13:43:43 GMT+0530 (India Standard Time)"},
{x: 1629879243000, y: 100, status: 100, request: "Wed Aug 25 2021 13:44:03 GMT+0530 (India Standard Time)"},
{x: 1629879263000, y: 400, status: 100, request: "Wed Aug 25 2021 13:44:23 GMT+0530 (India Standard Time)"},
{x: 1629879283000, y: 100, status: 100, request: "Wed Aug 25 2021 13:44:43 GMT+0530 (India Standard Time)"},
{x: 1629879303000, y: 300, status: 100, request: "Wed Aug 25 2021 13:45:03 GMT+0530 (India Standard Time)"},
{x: 1629879323000, y: 100, status: 100, request: "Wed Aug 25 2021 13:45:23 GMT+0530 (India Standard Time)"},
{x: 1629879343000, y: 200, status: 100, request: "Wed Aug 25 2021 13:45:43 GMT+0530 (India Standard Time)"},
{x: 1629879363000, y: 100, status: 100, request: "Wed Aug 25 2021 13:46:03 GMT+0530 (India Standard Time)"},
{x: 1629879383000, y: 500, status: 100, request: "Wed Aug 25 2021 13:46:23 GMT+0530 (India Standard Time)"},
{x: 1629879440000, y: 100, status: 100, request: "Wed Aug 25 2021 13:47:20 GMT+0530 (India Standard Time)"},
{x: 1629879560000, y: 100, status: 100, request: "Wed Aug 25 2021 13:49:20 GMT+0530 (India Standard Time)"},
{x: 1629879560000, y: 400, status: 100, request: "Wed Aug 25 2021 13:49:20 GMT+0530 (India Standard Time)"},
{x: 1629879680000, y: 100, status: 100, request: "Wed Aug 25 2021 13:51:20 GMT+0530 (India Standard Time)"},
{x: 1629879680000, y: 200, status: 100, request: "Wed Aug 25 2021 13:51:20 GMT+0530 (India Standard Time)"},
{x: 1629879800000, y: 100, status: 100, request: "Wed Aug 25 2021 13:53:20 GMT+0530 (India Standard Time)"},
{x: 1629879800000, y: 300, status: 100, request: "Wed Aug 25 2021 13:53:20 GMT+0530 (India Standard Time)"},
{x: 1629879890000, y: 200, status: 100, request: "Wed Aug 25 2021 13:54:50 GMT+0530 (India Standard Time)"},
{x: 1629879890000, y: 100, status: 100, request: "Wed Aug 25 2021 13:54:50 GMT+0530 (India Standard Time)"}];

setTimeout(function(){
  data2.push({x: '2021-08-25T12:50:00', y: 200 })
  myChart.update();
}, 5000);

 var x = 0;
  var intervalInstance = setInterval(function(){
    x++;
    if(x== 5){
      clearInterval(intervalInstance);
    }else{
      data3.push({x: new Date().getTime(), y: (data3[data3.length-1].y+100), status: 100, request: new Date()});
      myChart.update();
    }
   
  }, 5000);



// Setup block
const data = {
  datasets: [
      {
        label: "Data1",
        fill: true,
        backgroundColor: colors.green.fill,
        pointBackgroundColor: colors.green.stroke,
        borderColor: colors.green.stroke,
        pointHighlightStroke: colors.green.stroke,
        borderCapStyle: 'butt',
        // data: data1,
        // data: data2
        data: data3
      }
    ]
};

// Config block
const config = {
   type: 'line',
  data,
  options: {
    plugins: {
      responsive: true,
      legend: {
        display: true,
        position: 'bottom',
      },
      title: {
        display: true,
        text: 'Status',
        padding: {
          top: 20,
          bottom: 15
        },
        font: {
          weight: "bold",
          size: 25
        }
      }
    },
    layout: {
      padding: {
        left: 20,
        right: 0,
        top: 0,
        bottom: 25
      }
    },
    scales: {
      x: {
        type: 'time',
        time: {
          displayFormats: {
            // millisecond: 'HH:mm:ss.SSS',
            // second: 'HH:mm:ss',
            // minute: 'HH:mm',
            // hour: 'HH'
          }
        }, 
        ticks: {
          align: "center"
        },
        parsing: false
      },
      y: {
        suggestedMin: 100,
        suggestedMax: 500,
        stepSize: 100,
        ticks : {
          min: 100,
          max: 500,
          stepSize: 100
        }
      },
    }
  }
};

var ctx = document.getElementById("myChart").getContext("2d");
const myChart = new Chart(ctx, config);