There are gaps when rendering the graph in the chrome browser on mac os, everything is fine in other browsers. Breaks appear due to the addition of smooth lines using tension in datasets and does not depend on what value is set. With the animation turned off, gaps also appear and does not depend on the gradient. Maybe someone has come across this problem and can suggest a solution.

const data = {
labels,
datasets: [
    {
        fill: true,
        // @TODO: replace with real data from the back
        data: labels.map(() => Math.floor(Math.random() * 5000)),
        borderWidth: 4,
        borderColor: '#8766E2',
        pointRadius: 0,
        pointBackgroundColor: '#FFFFFF',
        backgroundColor: (context: ScriptableContext<'line'>) => {
            const ctx = context.chart.ctx;
            const gradient = ctx.createLinearGradient(0, 0, 0, 340);
            gradient.addColorStop(0, 'rgba(135, 102, 226, 0.5)');
            gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');
            return gradient;
        },
        pointHoverBorderColor: '#8766E2',
        pointHoverRadius: 6,
        pointHoverBorderWidth: 4,
        tension: 0.3,
    },
],};