Chart.js and gradient background color

问题:

I have this graph:

I'm using linearGradient to color the areas between the lines. I'm calculating the cutting point's x, and then calculating the offset for addColorStop(offset, color)of the gradient.

When setting the tension property to 0, (which means straight lines) the graph gets colored as expected. Problem is, that when I set tension to be 0.5 I get the following result: The reason for that is that the tension is calculated by Bezier Curve, which changes the equation I use to calculate the cutting point (the original points have changed).

The question is, how do I calculate the points coordinates after the tension?

Codepen to demonstrate the problem: https://codepen.io/benma/pen/goRMVp

Edit

here is a plunker that demonstrates the problem with dynamic data, including the way i'm calculating the intersections.