CanvasJs - StackedArea Graph (x-axis --> Date and y-axis --> Number count)

stackedAeaGraph.js

<!-- Html Stacked Area Graph -->
<div class="container-fluid" >
    <div class="row">
        <div class="col-md-12">
            <div id="chartContainer" style="height: 300px; width: 100%;">
              </div>
            
        </div>
    </div>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</div>



// Stacked Area Graph Implementation
 $scope.dataPoint1 = [
    { x: new Date("01-06-2021"), y: 4 },
    { x: new Date("03-06-2021"), y: 14 },
    { x: new Date("07-06-2021"), y: 15 },
    { x: new Date("11-06-2021"), y: 1 },
    { x: new Date("13-06-2021"), y: 26 },
    { x: new Date("15-06-2021"), y: 2 }
  ];

  $scope.dataPoint2 = [
    { x: new Date("02-06-2021"), y: 6 },
    { x: new Date("04-06-2021"), y: 16 },
    { x: new Date("06-06-2021"), y: 17 },
    { x: new Date("08-06-2021"), y: 2 },
    { x: new Date("10-06-2021"), y: 28 },
    { x: new Date("12-06-2021"), y: 4 }
  ];

  $scope.dataPoint3 = [
    { x: new Date("03-06-2021"), y: 8 },
    { x: new Date("06-06-2021"), y: 18 },
    { x: new Date("09-06-2021"), y: 19 },
    { x: new Date("12-06-2021"), y: 2 },
    { x: new Date("15-06-2021"), y: 30 },
    { x: new Date("18-06-2021"), y: 6 }
  ];

  $scope.dataPoint4 = [
    { x: new Date("04-06-2021"), y: 10 },
    { x: new Date("08-06-2021"), y: 20 },
    { x: new Date("12-06-2021"), y: 21 },
    { x: new Date("16-06-2021"), y: 2 },
    { x: new Date("20-06-2021"), y: 32 },
    { x: new Date("24-06-2021"), y: 8 }
  ];
  $scope.chart = new CanvasJS.Chart("chartContainer", {
    width: 1000,
    theme: "dark2",
    animationEnabled: true,
    title: {
      text: "Stacked Area"
    },
    axisX: {
      valueFormatString: "DD MMM YYYY",
      labelAngle: -50,
      labelFontSize: 14,
      titleFontSize: 16,
      titleFontWeight: "bold"
    },
    axisY: {
      title: "Transaction(s)",
      valueFormatString: "0",
      titleFontSize: 16,
      labelFontSize: 14,
      titleFontWeight: "bold",
      margin: 20,
      gridThickness: 1,
      interval: 5
    },
    toolTip: {
      enabled: true,
      shared: true
    },
    legend: {
      horizontalAlign: "center",
      verticalAlign: "bottom",
      fontWeight: "bold"
    },
    data: [
      {
        type: "stackedArea",
        showInLegend: true,
        name: "A",
        toolTipContent:
          '<span style="color:green"><strong>{name}: </strong></span> {y}',
        color: "green",
        markerType: "circle",
        markerSize: 8,
        legendMarkerType: "circle",
        dataPoints: $scope.dataPoint1
      },
      {
        type: "stackedArea",
        showInLegend: true,
        name: "B",
        toolTipContent:
          '<span style="color:grey"><strong>{name}: </strong></span> {y}',
        color: "grey",
        markerType: "triangle",
        markerSize: 8,
        legendMarkerType: "triangle",
        dataPoints: $scope.dataPoint2
      },
      {
        type: "stackedArea",
        showInLegend: true,
        name: "C",
        toolTipContent:
          '<span style="color:gold"><strong>{name}: </strong></span> {y}',
        color: "gold",
        markerType: "square",
        legendMarkerType: "square",
        dataPoints: $scope.dataPoint3
      },
      {
        type: "stackedArea",
        showInLegend: true,
        name: "D",
        toolTipContent:
          '<span style="color:red"><strong>{name}: </strong></span> {y} <br> <b> Total: <b> #total',
        color: "red",
        markerType: "cross",
        legendMarkerType: "cross",
        dataPoints: $scope.dataPoint4
      }
    ]
  });

  $scope.chart.render(); //render the chart for the first time