<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>

var startDate = new Date(2025, 1, 1); // Feb 1, 2025
var endDate = new Date(2025, 1, 28); // Feb 28, 2025

// Generate random dataPoints
var dataPoints = [];
var currentDate = new Date(startDate);
while (currentDate <= endDate) {
  dataPoints.push({
    x: new Date(currentDate),
    y: Math.floor(Math.random() * 100) + 50
  });
  currentDate.setDate(currentDate.getDate() + 1);
}

var chart = new CanvasJS.Chart("chartContainer", {
  theme: "light2",
  title: {
    text: "Sales Data with Highlighted Weekends"
  },
  axisX: {
    valueFormatString: "D MMM"
  },
  axisY: {
    title: "Sales",
    includeZero: false
  },
  data: [
    {
      type: "spline",
      dataPoints: dataPoints
    }
  ]
});

chart.render();
addWeekendStripLines(chart, chart.axisX[0]);

function addWeekendStripLines(chart, axis) {
  var startDate = chart.axisX[0].get("viewportMinimum"),
    endDate = chart.axisX[0].get("viewportMaximum"),
    currentDate = new Date(startDate);

  var stripLines = [];

  while (currentDate <= endDate) {
    if (currentDate.getDay() === 6) {
      // Saturday
      var weekendStart = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate(), 0, 0, 0);
      var weekendEnd = new Date(currentDate.getFullYear(), currentDate.getMonth(), currentDate.getDate() + 1, 23, 59, 59);

      stripLines.push({
        startValue: weekendStart,
        endValue: weekendEnd,
        color: "#ECEEF0",
        opacity: 0.5,
        label: "Weekend",
        labelAlign: "center",
        labelFontColor: "#333",
        labelBackgroundColor: "transparent"
      });
    }

    currentDate.setDate(currentDate.getDate() + 1);
  }

  axis.set("stripLines", stripLines);
}