Изменить диаграмму. js значок легенды в соответствии с шириной линии диаграммы

Question

Я пытаюсь изменить легенду линейного графика в диаграмме. js, чтобы она была «линией» вместо блока.

, т. Е.

Вот пример этого здесь:

Изменить диаграмму js Стиль значка легенды

, но когда я меняю pointStyle на 'line' в наборе данных, он меняет точки на графике на линии (как и ожидалось), но оставляет легенду в блоке.

Как сохранить закругленные точки на графике, чтобы легче было наводить курсор и получать легенда, соответствующая ширине линии, как показано в моем примере pi c?

Мой кодовый указатель здесь: https://codepen.io/trevcis/pen/eqyNyZ

var canvas = document.getElementById("linepackChart");
var ctx = canvas.getContext("2d");

// Global Options:
Chart.defaults.global.defaultFontColor = "#555759";
Chart.defaults.global.defaultFontSize = 14;

var data = {
  labels: [
    "Mar 18",
    "Mar 19",
    "Mar 20",
    "Mar 21",
    "Mar 22",
    "Mar 23",
    "Mar 24"
  ],
  datasets: [
    {
      label: "Line",
      fill: false,
      lineTension: 0.2,
      backgroundColor: "#0e406a",
      borderColor: "#0e406a", // The main line color
      borderWidth: 6,
      radius: 0,
      borderCapStyle: "square",
      borderDash: [], // try [5, 15] for instance
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "black",
      pointBackgroundColor: "white",
      pointBorderWidth: 2,
      pointHoverRadius: 6,
      pointHoverBackgroundColor: "black",
      pointHoverBorderColor: "#555759",
      pointHoverBorderWidth: 2,
      pointRadius: 5,
      pointHitRadius: 6,
      data: [531, 420, 540, 510, 480, 520, 525]
    },
    {
      label: "Line Target",
      fill: false,
      lineTension: 0.1,
      backgroundColor: "rgba(167,105,0,0.4)",
      backgroundColor: "#799b3e",
      borderColor: "#799b3e",
      borderCapStyle: "butt",
      borderDash: [5, 5],
      borderDashOffset: 0.0,
      borderJoinStyle: "miter",
      pointBorderColor: "white",
      pointBackgroundColor: "#555759",
      pointBorderWidth: 1,
      pointHoverRadius: 6,
      pointHoverBackgroundColor: "white",
      pointHoverBorderColor: "#555759",
      pointHoverBorderWidth: 2,
      pointRadius: 4,
      pointHitRadius: 6,
      data: [540, 460, 580, 530, 510, 530, 545]
    }
  ]
};

// Notice the scaleLabel at the same level as Ticks
var options = {
  maintainAspectRatio: false,
  onAnimationProgress: function () {
    drawDatasetPointsLabels();
  },
  onAnimationComplete: function () {
    drawDatasetPointsLabels();
  },
  legend: {
    display: true,
    position: "bottom",
    usePointStyle: true
  },
  tooltips: {
    callbacks: {
      label: function (tooltipItem) {
        return "" + tooltipItem.yLabel + " e3m3";
      }
    }
  },
  scales: {
    yAxes: [
      {
        ticks: {
          min: 400,
          max: 600,
          stepSize: 200,
          display: true
        },
        scaleLabel: {
          display: false,
          labelString: "E3M3",
          fontSize: 15
        }
      }
    ],
    xAxes: [
      {
        ticks: {
          display: false
        },
        scaleLabel: {
          display: false,
          labelString: "Moola",
          fontSize: 20
        }
      }
    ]
  }
};

// Chart declaration:
var myBarChart = new Chart(ctx, {
  type: "line",
  data: data,
  options: options
});

function drawDatasetPointsLabels() {
  //alert("gg");
  ctx.font = ".9rem sans-serif";
  ctx.fillStyle = "#AAA";
  ctx.textAlign = "center";
  $(Trends.datasets).each(function (idx, dataset) {
    // First dataset is shifted off the scale line.
    // Don't write to the canvas for the null placeholder.
    $(dataset.points).each(function (pdx, pointinfo) {
      if (pointinfo.value !== null) {
        ctx.fillText(pointinfo.value, pointinfo.x, pointinfo.y - 15);
      }
    });
  });
}

body {
  background-color: #999;
}
.chartAnnotations {
  font-weight: bold;
  position: absolute;
  color: #555759;
  font-size: 14px;
  font-weight: normal;
  display: none;
}
#chartMax {
  top: 0;
  left: 20px;
}
#chartMin {
  bottom: 0;
  left: 20px;
}
#chartDateRange {
  bottom: 0;
  right: 14px;
  text-align: right;
  padding: 0;
  margin: 0;
  display: none;
}
#linepackChart {
  background-color: #fff;
  /*box-shadow: 0 3rem 5rem -2rem rgba(0, 0, 0, 0.6);*/
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<p>&nbsp;</p>
<div class="container">
  <div class="row">
    <div class="col-4" style="height:120px;">
      <canvas id="linepackChart"></canvas>
      <div id="chartMax" class="chartAnnotations">600</div>
      <div id="chartMin" class="chartAnnotations">300</div>
      <div id="chartDateRange" class="chartAnnotations">Mar 18 - Mar 24</div>
    </div>
  </div>
</div>