<canvas id="speedChart" width="600" height="400"></canvas>

body {
  height: 600px;
}

canvas {
  max-height: 100%;
}

var speedCanvas = document.getElementById("speedChart");

Chart.defaults.font.family = "Lato";
Chart.defaults.font.size = 18;
Chart.defaults.color = "black";

function hoursEarlier(hours) {
  let time = new Date(new Date().getTime() - (hours * 60 * 60 * 1000));
  return time;
};

var speedData = {
  labels: [hoursEarlier(10), hoursEarlier(9.4), hoursEarlier(8), hoursEarlier(7), hoursEarlier(6), hoursEarlier(5), hoursEarlier(4)],
  datasets: [{
    label: "Car Speed",
    data: [0, 59, 75, 20, 20, 55, 40],
    borderColor: 'orange',
    backgroundColor: 'white',
    pointBorderColor: 'orange',
    pointBackgroundColor: 'white',
    pointRadius: 5,
    pointHoverRadius: 10,
    pointHitRadius: 30,
    pointBorderWidth: 3,
    pointStyle: 'rectRounded',
  }]
};

var chartOptions = {
  plugins: {
    legend: {
      position: "top",
      labels: {
        boxWidth: 50,
        usePointStyle: true,
        pointStyle: "line",
      }
    }
  },
  scales: {
    x: {
      type: "time",
      grid: {
        tickColor: "green",
        borderDash: [5, 2],
        tickWidth: 2,
        color: "black",
        borderColor: "black",
      },
      time: {
        unit: "minute",
        stepSize: 30,
        tooltipFormat: "hh:mm a",
        displayFormats: {
          "minute": "hh:mm a"
        }
      },
      ticks: {
        color: "green",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Time",
        font: {
          weight: "bold",
          size: 22
        }
      }
    },
    y: {
      grid: {
        color: "black",
        borderDash: [5, 2,],
        borderColor: "black",
        tickColor: "red",
        tickWidth: 2,
      },
      ticks: {
        color: "red",
        font: {
          weight: "bold"
        }
      },
      title: {
        display: true,
        text: "Speed (in mph)",
        font: {
          weight: "bold",
          size: 22
        }
      }
    }
  }
};

var lineChart = new Chart(speedCanvas, {
  type: 'line',
  data: speedData,
  options: chartOptions
});