Chartjs-Show lines with a point for ChartJS legend labels

const NUM_DATA = 7;
const NUM_CFG = {count: NUM_DATA, min: 0, max: 100};
const data = {
    labels: ['a','b','c','d','e','f','g'],
    datasets: [
        {
            label: 'Dataset: red',
            data: [100, 150, 150, 100, 150, 150, 100],
            pointRadius: 10,
            pointStyle: 'rect',
            borderDash: [5,18],
            borderColor: 'blue',
            backgroundColor: 'red',
            fill: false,
        },
        {
            label: 'Dataset: blue',
            data: [200, 170, 170, 200, 170, 170, 200],
            borderDash: [5,5,5],
            pointRadius: 10,
            borderColor: 'blue',
            pointStyle: 'crossRot',
            backgroundColor: 'blue',
            fill: false,
        },
    ],
};

const config = {
    type: 'line',
    data: data,
    options: {
        plugins: {
            legend: {
                labels: {
                    usePointStyle: true
                }
            }
        }
    },
};

config.options.plugins.legend.labels.pointStyleWidth = 60;

// Using line styling for labels instead of points
config.options.plugins.legend.labels.generateLabels = (chart) => {
    const datasets = chart.data.datasets;
    const options = chart.options.legend || {};
    return chart._getSortedDatasetMetas().map((meta) => {
        const style = meta.controller.getStyle(),
            dataSet = datasets[meta.index];
        return {
            text: dataSet.label,
            hidden: !meta.visible,
            pointStyle: (function(){
                const canvas = document.createElement('canvas');
                canvas.setAttribute('width', "50");
                canvas.setAttribute('height', "20");
                const context = canvas.getContext("2d");

                context.lineWidth = style.borderWidth;
                context.lineCap = style.borderCapStyle;
                context.lineJoin = style.borderJoinStyle;
                context.setLineDash(style.borderDash);
                context.dashOffset = style.lineDashOffset;
                context.strokeStyle = style.borderColor;

                // draw the line
                context.beginPath();
                context.moveTo(1, 10);
                context.lineTo(50, 10);
                context.stroke();
                context.fillStyle = style.backgroundColor;

                context.setLineDash([]);
                context.lineWidth = 1;
                // draw the standard symbol
                Chart.helpers.drawPoint(context, {
                    pointStyle: dataSet.pointStyle,
                    borderWidth: style.borderWidth,
                    radius: Math.min(dataSet.pointRadius, 10),
                }, 25, 10);

                // or draw a circle
                // context.beginPath();
                // //context.beginPath();
                // context.arc(25, 10, 4, 0, 2 * Math.PI);
                // context.fill();

                return canvas;
            })(),
            //rotation: style.rotation, rotation ignored

            datasetIndex: meta.index
        };
    });
};

let canvas = document.getElementById('test-canvas');
let chart = new Chart(
    canvas,
    config
);

<canvas id="test-canvas"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js" integrity="sha512-ElRFoEQdI5Ht6kZvyzXhYG9NqjtkmlkfYk0wr6wHxU9JEHakS7UJZNeml5ALk+8IKlU6jDgMabC3vkumRokgJA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>