Different Line Chart border colors for positive and negative values using Chart Js

I have created a line chart using charts JS, but I am unable to apply the line color change. Expectation should be: if the y value is less than 0 (zero) the line should be red and if it's greater than 0(zero) green.

I have forked my code here: codesandbox.

I have tried to use dataset segment borderColor; if y value <0 I set the color red, else if y value >0 the color is green, but it does not work as expected.

In the dataset I have {x: 42380, y: negative value (which is near by zero)} followed by {x: 42500, y: POSITIVE value(which very first positive value)}]; the segment between these two points is showing red
despite the fact that the negative part from y = -185 to zero, is much shorter than the positive part, from zero to y = 2000

The solution for changing the color of the line depending on the sign of the points was already implemented by setting the borderColor for segments and it worked fine for all segments that had both ends of the same sign; the config object was

datasets:[{
    data: ....
    .......
    segment: {
        borderColor: (ctx) => {
            return getBorderColor(ctx);
        }
    },
}]

with the actual computation implemented in the function getBorderColor (slightly modified from the original to simplify the introduction of my extension below):

const getBorderColor = 
        (ctx, colPositive = "green", colNegative = "red") => {
    return ctx.p0.parsed.y >= 0 ? colPositive : colNegative;
};

To adapt this to work for segments that intersect the x axis, the solution I found was to set the color as a LinearGradient with four color stops described by this table:

      point:    p0       x-axis intersection      p1
coordinates:  (x0, y0)        (_, 0)           (x1, y1)
   fraction:     0             frac               1
      color:   green ------> green|red --------> red

where frac is easy to compute from the coordinates of the two points. One can see this is not actually a visual gradient, the change of color from "green" to "red" (used as an example) is done at the same point, the intersection of the segment to the x axis.

Here's the code with explanations in comments:

const getBorderColor = (ctx, colPositive = "green", colNegative = "red") => {
    if (ctx.p0.parsed.y * ctx.p1.parsed.y < 0) {
        // if the segment changes sign from p0 to p1
        const x0 = ctx.p0.parsed.x,
            x1 = ctx.p1.parsed.x,
            y0 = ctx.p0.parsed.y,
            y1 = ctx.p1.parsed.y,
            dataset = ctx.chart.data.datasets[ctx.datasetIndex],
            //identify the correct axes used for the dataset
            xAxisId = dataset.xAxisId ?? "x",
            yAxisId = dataset.yAxisId ?? "y",
            //transform values to pixels
            x0px = ctx.chart.scales[xAxisId].getPixelForValue(x0),
            x1px = ctx.chart.scales[xAxisId].getPixelForValue(x1),
            y0px = ctx.chart.scales[yAxisId].getPixelForValue(y0),
            y1px = ctx.chart.scales[yAxisId].getPixelForValue(y1);
        
        // create gradient form p0 to p1
        const gradient = ctx.chart.ctx.createLinearGradient(x0px, y0px, x1px, y1px);
        // calculate frac - the relative length of the portion of the segment
        // from p0 to the point where the segment intersects the x axis
        const frac = Math.abs(y0) / (Math.abs(y0) + Math.abs(y1));
        // set colors at the ends of the segment
        const [col_p0, col_p1] =
            y0 > 0 ? [colPositive, colNegative] : [colNegative, colPositive];
        gradient.addColorStop(0, col_p0);
        gradient.addColorStop(frac, col_p0);
        gradient.addColorStop(frac, col_p1);
        gradient.addColorStop(1, col_p1);
        return gradient;
    }
    return ctx.p0.parsed.y >= 0 ? colPositive : colNegative;
};

and the fork of the original codesandbox.