Hay lagunas al representar el gráfico en el navegador Chrome en Mac OS, todo está bien en otros navegadores. Las rupturas aparecen debido a la adición de líneas suaves usando tensión en los conjuntos de datos y no dependen del valor establecido. Con la animación desactivada, también aparecen espacios y no depende del degradado. Tal vez alguien se haya encontrado con este problema y pueda sugerir una solución.

 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, }, ],};