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

​

Chart.defaults.font.family = "Lato";

Chart.defaults.font.size = 18;

Chart.defaults.color = "black";

​

var speedData = {

  labels: ["0s", "10s", "20s", "30s", "40s", "50s", "60s"],

  datasets: [{

    label: "Car Speed",

    data: [0, 59, 75, 20, 20, 55, 40],

    lineTension: 0,

    fill: false,

    borderColor: 'orange',

    backgroundColor: 'transparent',

    pointBorderColor: 'orange',

    pointBackgroundColor: 'orange',

    borderDash: [15, 5],

    pointRadius: 5,

    pointHoverRadius: 10,

    pointHitRadius: 30,

    pointBorderWidth: 2,

    pointStyle: 'rectRounded'

  }]

};

​

var chartOptions = {

  plugins: {

    legend: {

      display: true,

      position: 'top',

      labels: {

        boxWidth: 50,

        usePointStyle: true,

        pointStyle: "line"

      }

    }

  },

  scales: {

    x: {

      grid: {

        display: false

      },

      title: {

        display: true,

        text: "Time in Seconds",

        color: "red",

        font: {

          size: 24,

          weight: "bold"

        }

      }

    },

    y: {

      grid: {

        color: "#ccc",

        borderDash: [20, 4],

        borderColor: "black",

        tickColor: "black"

      },

      title: {

        display: true,

        text: "Speed in Miles per Hour",

        color: "green",

        font: {

          size: 18,

          weight: "bold"

        }

      }

    }

  }

};

​

var lineChart = new Chart(speedCanvas, {

  type: 'line',

  data: speedData,

  options: chartOptions

});