Javascript ChartJS-向数据集添加自定义渐变

这是我为mockup设计的，我选择chartjs，因为它似乎是最可定制的，我通过获得最高值并使用scale.bottom值实现了渐变：

const topPoint = [...dataset.data].sort((a, b) => b.y - a.y);
const startY = yAxis.getPixelForValue(topPoint[0].y, index, 0);
// gradient is drawn from the highest peak to the bottom of the graph
const gradient = ctx.createLinearGradient(0, startY, 0, yAxis.bottom);
gradient.addColorStop(0, customGradientFill.gradientColor1);
gradient.addColorStop(1, customGradientFill.gradientColor2);

这一切都很好，但我需要或多或少的'切断'的梯度填充从第一个让我们说'3'点，并改变颜色为红色

我需要曲线保持一致，我有两个数据集，第一个（红色）使用与orange相同的值，但切片前3个点，使用orange数据集，我将前3个点的值设置为NaN，这不会渲染它们，然而，当两个数据集相遇时，它们是一个硬边，我需要它们保持曲线，如上面的示例所示：