You must be logged in to post your query.
Home › Forums › Chart Support › Filling area between lines with different color depending on which line is above
Tagged: area, between, color, rangeArea, shaded
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!
here are those points in a jsFiddle
@hkleo,
Sorry, this feature is not available as of now.
__ Shashi Ranjan Team CanvasJS
Hello! Thank you for your response! I did it the long way (finding where the two lines intersect) just incase anyone else comes across this problem and is looking for a solution. It is a bit messy but here it is in a jsFiddle
Forgot to account for a slope of 0 -> here’s the updated jsFiddle
You must be logged in to reply to this topic. Login/Register