How to get Uptime charts for Web Monitoring like Dynatrace?

Question

PROBLEM STATEMENT

Hello Guys. I am new to Web Development. I am working on a project that involves showing uptime charts of certain websites for website monitoring. The kind of chart needed is as follows:

Uptime Chart

As we can see, it's a time series chart and in the same chart the successful calls to the site are in green and the unsuccessful ones are shown in red. My problem is I am unable to get this in the same chart. So can someone tell me what has to be done ? I am currently using Chart.js for showing realtime charts on the webpage.

Methods Tried Let's say my time series dummy dataset looks like this:

data: [
        { x: "2021-03-08 00:08:46", y: 1 },
        { x: "2021-03-08 00:38:46", y: 0 },
        { x: "2021-03-08 01:08:46", y: 1 },
        { x: "2021-03-08 01:38:46", y: 0 },
        { x: "2021-03-08 02:08:46", y: 1 },
        { x: "2021-03-08 02:38:46", y: 0 },
        { x: "2021-03-08 03:08:46", y: 1 },
        { x: "2021-03-08 03:38:46", y: 0 },
        { x: "2021-03-08 04:08:46", y: 1 },
        { x: "2021-03-08 04:38:46", y: 0 },
        { x: "2021-03-08 05:08:46", y: 1 },
        { x: "2021-03-08 05:38:46", y: 0 },
        { x: "2021-03-08 06:08:46", y: 1 },
        { x: "2021-03-08 06:38:46", y: 0 },
        { x: "2021-03-08 07:08:46", y: 1 },
        { x: "2021-03-08 07:38:46", y: 0 },
        { x: "2021-03-08 08:08:46", y: 1 },
        { x: "2021-03-08 08:38:46", y: 0 },
        { x: "2021-03-08 09:08:46", y: 1 },
        { x: "2021-03-08 09:38:46", y: 0 },
        { x: "2021-03-08 10:08:46", y: 1 },
        { x: "2021-03-08 10:38:46", y: 0 } 
      ]

What I tried is separating the 1's and 0's and in the same chart showing the 1's in green and 0's in red having value as 1. My code from chart.js looks like this:

var ctx = document.getElementById("myChart");
ctx.height = 500;
ctx.width = 500;
var data = {
  datasets: [
    {
      fill: true,
      label: "Completed",
      borderColor: "#4BB543",
      backgroundColor: "#4BB543",
      borderColor: "#4BB543",
      data: [
        { x: "2021-03-08 00:08:46", y: 1 },
        { x: "2021-03-08 01:08:46", y: 1 },
        { x: "2021-03-08 02:08:46", y: 1 },
        { x: "2021-03-08 03:08:46", y: 1 },
        { x: "2021-03-08 04:08:46", y: 1 },
        { x: "2021-03-08 05:08:46", y: 1 },
        { x: "2021-03-08 06:08:46", y: 1 },
        { x: "2021-03-08 07:08:46", y: 1 },
        { x: "2021-03-08 08:08:46", y: 1 },
        { x: "2021-03-08 09:08:46", y: 1 },
        { x: "2021-03-08 10:08:46", y: 1 },
      ],
    },
    {
      fill: true,
      label: "Issues",
      borderColor: dangerColor,
      backgroundColor: "#FF0000",
      borderColor: "#FF0000",
      data: [
        { x: "2021-03-08 00:38:46", y: 1 },
        { x: "2021-03-08 01:38:46", y: 1 },
        { x: "2021-03-08 02:38:46", y: 1 },
        { x: "2021-03-08 03:38:46", y: 1 },
        { x: "2021-03-08 04:38:46", y: 1 },
        { x: "2021-03-08 05:38:46", y: 1 },
        { x: "2021-03-08 06:38:46", y: 1 },
        { x: "2021-03-08 07:38:46", y: 1 },
        { x: "2021-03-08 08:38:46", y: 1 },
        { x: "2021-03-08 09:38:46", y: 1 },
        { x: "2021-03-08 10:38:46", y: 1 },
      ],
    },
  ],
};

var lineChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: {
    scales: {
      xAxes: [
        {
          type: "time",
          time: {
            unit: "hour",
          },
          display: true,
          scaleLabel: {
            display: true,
            labelString: "Time",
          },
          ticks: {
            major: {
              fontStyle: "bold",
              fontColor: "#FF0000",
            },
          },
        },
      ],
      yAxes: [
        {
          display: true,
          scaleLabel: {
            display: true,
            labelString: "Response Time(s)",
          },
          ticks: {
            beginAtZero: true,
          },
        },
      ],
    },
    maintainAspectRatio: false,
    bezierCurve: false,
  },
});

Here's how my output chart looks like: Obtained Chart using the code

As we can see the green is overpowering the red. I tried with other shades of green but the results are still not good. Please take a look and let me know how can make the uptime chart as the one shown in the first image. Thanks.