How do I set the style for the legend data differently per dataset with Chart.js? - html5-canvas

Question

I have created a chart with Chart.js, and I now need to show the data in the legend differently per the two different datasets.
How do I show the first dataset 'Low/High Range Limit' in the classic rectangle/fill style and the dataset 'Patient Results' in the point style?
(Bonus: Currently, I'm showing the second dataset near-correctly. I also want to completely fill the circle with the solid 'steelblue' color, not with transparency.)
(I would provide an image but I need at least 10 reputation to post them.)
<style>
.chart-container { width: 550px }
</style>
<div class="chart-container">
<canvas id="myChart" width="2" height="1"></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/chart.js#2.8.0"></script>
<script>
var context = document.getElementById('myChart');
var myChart = new Chart(context, {
type: 'line',
data: {
labels: ['(A)', '(B)', '(C)', '(D)'],
datasets: [
{
label: 'Patient Results',
data: [40, 230, 30, 60],
borderColor: 'steelblue',
borderWidth: 2,
pointBackgroundColor: 'steelblue',
fill: false,
spanGaps: true // if true, lines will be drawn between points with no or null data. if false, points with NaN data will create a break in the line.
},
{
data: [0, 30, 20, 20], // representing the low range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#fff'
},
{
label: 'Low/High Range Limit',
data: [60, 150, 50, 40], // representing the high range only
borderColor: '#222',
borderWidth: 2,
pointRadius: 0,
fill: true,
backgroundColor: '#c2e8f5'
}
]
},
options: {
elements: {
line: {
tension: 0 // disables bezier curves
}
},
legend: {
labels: {
boxWidth: 6,
filter: function(legendItem, chartData) {
if (legendItem.datasetIndex === 1) {
return false;
}
return true;
},
usePointStyle: true
},
position: 'right',
reverse: true // shows 'Low/High Range Limit' first
},
scales: {
yAxes: [{
ticks: {
beginAtZero: true
}
}]
}
}
});
</script>