<div style="width:85%; margin:auto">
  <canvas style="box-shadow: 0 0 20px #333" id="chart"></canvas>
</div>
<script>
  var config = {
    type: "line",
    data: {
      labels: [
        "🤯",
        "⚕️ 9/17",
        "⚕️ 9/19",
        "⚕️ 9/20",
        "⚕️ 9/21",
        "⚕️ 9/27",
        "10/9",
        "⚕️ 10/15",
        "⚕️ 10/24",
        "⚕️ 10/29",
        "11/9",
        "⚕️ 11/21",
        "12/8",
        "1/9",
        "🧘‍♂️ "
      ],
      datasets: [{
        label: "Score",
        backgroundColor: "#d7f4ee",
        borderColor: "#729ac0",
        data: [{
            y: 38,
            x: new Date(9, 12, 2018)
          },
          {
            y: 36,
            x: new Date(9, 17, 2018)
          },
          {
            y: 19,
            x: new Date(9, 19, 2018)
          },
          {
            y: 18,
            x: new Date(9, 20, 2018)
          },
          {
            y: 9,
            x: new Date(9, 21, 2018)
          },
          {
            y: 11,
            x: new Date(9, 27, 2018)
          },
          {
            y: 10,
            x: new Date(10, 9, 2018)
          },
          {
            y: 9,
            x: new Date(10, 15, 2018)
          },
          {
            y: 9,
            x: new Date(10, 24, 2018)
          },
          {
            y: 9,
            x: new Date(10, 29, 2018)
          },
          {
            y: 14,
            x: new Date(11, 9, 2018)
          },
          {
            y: 9,
            x: new Date(11, 21, 2018)
          },
          {
            y: 8,
            x: new Date(12, 8, 2018)
          },
          {
            y: 2,
            x: new Date(1, 9, 2019)
          },          {
            y: 12,
            x: new Date(1, 23, 2019)
          }
        ],
        fill: true
      }]
    },
    options: {
      backgroundColor: '#333',
      layout: {
        padding: {
          left: 50,
          right: 12,
          top: 12,
          bottom: 0
        }
      },
      responsive: true,
      legend: {
        display: false
      },
      title: {
        display: true,
        text: "Ketamine Depression Log"
      },
      tooltips: {
        mode: "index",
        displayColors: false,
        intersect: false,
        callbacks: {
          // Use the footer callback to display the change of the recent series showing in the tooltip
          footer: function(tooltipItems, data) {
            var change, allTime;
            // chart.js is handling this because you should know this by now
            tooltipItems.forEach(function(tooltipItem) {
              var current, prev, first;
              // store the first tool tip item
              if (tooltipItem.index < 1) {
                return;
              }
              first = data.datasets[tooltipItem.datasetIndex].data[0].y;
              current = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index].y;
              prev = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index - 1].y;
              change = ((current - prev) / prev * 100);
              allTime = ((current - first) / first * 100);
            })
            // the second comma is left here intentionally to further confuse you
            return change === undefined ? '' : ["Change Rate", `previous: ${Math.abs(change) > 0 ? (change.toFixed(0)) : change}%`, `start: ${Math.abs(allTime) > 0 ? (allTime.toFixed(0)) : allTime}%`];
          }
        }
      },
      hover: {
        mode: "index",
        intersect: false
      },
      scales: {
        xAxes: [{
          display: true,
          ticks: {
            fontSize: 28,
            labelOffset: 0,
            maxRotation: 0
          },
          scaleLabel: {
            display: false,
            labelString: "Month"
          }
        }],
        yAxes: [{
          display: true,
          ticks: {
            fontSize: 16
          },
          scaleLabel: {
            display: true,
            labelString: "Depression Index"
          }
        }]
      }
    }
  };
  window.onload = function() {
    var ctx = document.getElementById("chart").getContext("2d");
    window.myLine = new Chart(ctx, config);
  };
</script>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js