Home forums Using CanvasJS Filling area between lines with different color depending on which line is above

This topic contains 4 replies, has 2 voices, and was last updated by  hkleo 4 months, 1 week ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #23931

    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!

    #23932

    here are those points in a jsFiddle

    #23943

    @hkleo,

    Sorry, this feature is not available as of now.

    __
    Shashi Ranjan
    Team CanvasJS

    #24025

    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

    #24027

    Forgot to account for a slope of 0 -> here’s the updated jsFiddle

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.