How to Use Multiple Point Styles in Legend in Chart JS

Thank you for the very clear explanation but the approach is somewhat convoluted. Here's a tidier solution:

legend: {
onClick: (click, legendItem, legend) => {
// Because we added the datasetIndex property we no longer need to look it up here
if (legend.chart.isDatasetVisible(legendItem.datasetIndex)) {
legend.chart.hide(legendItem.datasetIndex);
} else {
legend.chart.show(legendItem.datasetIndex);
}
},
labels: {
usePointStyle: true,
generateLabels: (chart) => {
return chart.data.datasets.map((dataset, index) => {
return {
text: dataset.label,
fillStyle: dataset.backgroundColor,
strokeStyle: dataset.borderColor,
lineWidth: dataset.borderWidth ?? 0,
pointStyle: dataset.type === 'line' ? 'line' : 'rect', // we don't need to loop through all of these creating an array to lookup later
datasetIndex: index, // if we assign the index here (following the Legend Item Interface implementation) then we don't need to guess it later based on the text value
hidden: !chart.isDatasetVisible(index) // we don't need to loop through all of these creating an array to lookup later
};
});
}
},
}

Is there a way to create the “line with the point” in the legend… just like it’s shown on the chart?