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

​

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

Chart.defaults.font.size = 22;

Chart.defaults.color = "black";

​

const checkSpeed = (ctx, color_a, color_b) => ctx.p0.parsed.y > ctx.p1.parsed.y ? color_a : color_b;

​

let dataFirst = {

  label: "Car A - Speed (mph)",

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

  borderColor: "black",

  backgroundColor: "transparent",

  borderDash: [3, 3],

  stepped: "middle"

};

​

let dataSecond = {

  label: "Car B - Speed (mph)",

  data: [20, 15, 60, 60, 65, 30, 70],

  borderColor: "yellowgreen",

  backgroundColor: "transparent",

  segment: {

        borderColor: ctx => checkSpeed(ctx, 'orangered', 'yellowgreen'),

  },

};

​

let speedData = {

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

  datasets: [dataFirst, dataSecond]

};

​

let lineChart = new Chart(speedCanvas, {

  type: "line",

  data: speedData

});

​