I have two lines, A and B, and I want to fill the area between them such that when the y value of line A is greater than the y value of line B, I want the space between them to be colored red, and when the y value of line A is less than the y value of line B, I want the space between them to be blue.
I couldn’t attach a photo, but here are some example points:
data: [
{
type: "rangeArea",
dataPoints: [
{ x: 10, y: [18.86, 40.76] },
{ x: 20, y: [55.95, 78.26] },
{ x: 30, y: [48.27, 10] },
{ x: 40, y: [67.65, 99.65] },
{ x: 50, y: [25.50, 51.26] }
]
},
{
type: 'line',
color: 'red',
dataPoints:[
{ x: 10, y: 18.86 },
{ x: 20, y: 55.95 },
{ x: 30, y: 48.27 },
{ x: 40, y: 67.65 },
{ x: 50, y: 25.50}
]
}
]
I want the shaded area where the red line lines the bottom of the shaded area to be a different color than the shaded area where the red line lines the top of the shaded area around x=30. Is this possible to do? Thank you!
.
