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

});