Chartjs-Correlating separate elements with different heights to line up along vertical center line

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<!-- 
      NOT USED FOR THIS EXAMPLE
      <script src="data.js"></script> 
      -->
<script src="https://codepen.io/EtherealBug/pen/bMZJWQ.js"></script>
<div id="image" class="canvas-container">
  <div class="canvas-container-inner">
    <canvas id="myChart"></canvas>
  </div>

  <div id="enclosed-js">
    <span id="js" class="chart-legend"> </span>
    <span id="js-legend" class="chart-legend"></span>
  </div>
</div>

<style>
  canvas {
    width: 100% !important;
    max-width: 2000px;
    height: auto !important;
  }

  #enclosed-js{
    position: relative;
    margin-top: 1.25%;
    margin-left: 10%;
  }
  #js-legend {
    /*width: 130px;*/
    background-color: rgba(0, 0, 0, 0);
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*chart.js default*/
    font-size: .85em;
    font-weight: bold;
    color: #666;
    margin-left: 2.1em;
    /*chart.js default*/
  }

  #js {
    float: left;
    width: 2em;
    height: 0.25em;
    background: black;
    position:absolute;
    top: 50%;
  }

  #image {
    border: 2px solid rgba(102, 102, 102, .2);
  }

</style>
<script>
  var labels = jsonfile.jsonarray.map(function(e) {
    return e.Time;
  });
  var data = jsonfile.jsonarray.map(function(e) {
    return e.Speed;
  });

  var ctx = myChart.getContext('2d');
  var config = {
    options: {
      legend: {
        display: false,
      },
      title: {
        display: true,
        text: "Steady State",
        fontSize: 25,
        padding: 25,
      },
      scales: {
        xAxes: [{
          scaleLabel: {
            fontSize: 14,
            fontStyle: 'bold',
            display: true,
            labelString: 'Time (days)'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 9,
            fontStyle: 'bold',
            minRotation: 0,
            maxRotation: 0,
            callback: function(label, index, labels) {
              switch (label) {
                case 1:
                  return '1';
                case 222:
                  return '2';
                case 443:
                  return '3';
                case 664:
                  return '4';
                case 885:
                  return '5';
                case 1106:
                  return '6';
                case 1327:
                  return '7';
                case 1548:
                  return '8';
                case 1769:
                  return '9';
                case 1993:
                  return '10';
              }
            }

          },

        }],
        yAxes: [{
          scaleLabel: {
            fontSize: 14,
            fontStyle: 'bold',
            display: true,
            labelString: 'Concentration (\u03BCM)'
          },
          ticks: {
            autoSkip: true,
            maxTicksLimit: 10,
            fontStyle: 'bold',
          },

        }],
      },
    },
    type: 'line',
    data: {
      labels: labels,
      datasets: [{
        lineTension: 0.4, //defaul val = 0.4
        pointBackgroundColor: 'rgba(0,0,0,0)',
        pointBorderColor: 'rgba(0,0,0,0)',
        borderColor: 'black',
        borderWidth: 4,
        fill: false,
        label: 'steady state',
        data: data,
      }]
    }
  };
  var jsLegend = document.getElementById("js-legend");
  jsLegend.innerHTML = '\xa0' + "steady state";
  var chart = new Chart(ctx, config);

</script>