Chart.JS Styling Legend

Question

i'm trying to write untitled ui's line chart on vue.js and i couldn't reach this legend styling no matter what i try:

and i reached this:

here is the related code below:

//   
plugins: [
                        {
                            beforeInit(chart) {
                                const originalFit = chart.legend.fit;

                                chart.legend.fit = function fit() {
                                    originalFit.bind(chart.legend)();
                                    this.width += 8;
                                };
                            },
                        },
                    ],
//
options: {
    plugins: {
                            legend: {
                                display: true,
                                position: "right",
                                align: "start",
                                rtl: false,
                                fullSize: true,
                                reverse: true,
                                labels: {
                                    usePointStyle: true,
                                    textAlign: "right",
                                    boxHeight: 4,
                                    boxWidth: 4,
                                },
                            },
 
                        },
     elements: {
                            point: {
                                hoverRadius: 0,
                                pointRadius: 0,
                                pointStyle: "circle",
                            },
                        },
}

with the beforeInit function (i found that solution on here too) actually you are not giving padding to neither text or point, you are increasing the height of the legend box. because of that you have to align all the elements to the right but there is no pointAlign propery on labels. if you give rtl: true and text align: "left" you receive this:

and i don't want that either.