Victory line with multiple colors

[poPaTheGuru]

Hello,

I am trying to create a Victory line that have multiple colors (red and blue based on a condition). (open also a SO question here: SO question

This is my component:

       <VictoryLine
          data={savingsGoal}
          style={{
            data: {
              strokeWidth: 2,
              stroke: isShortfall ? 'red' : 'blue',
              strokeDasharray: savingsStrokeDash
            }
          }}
          interpolation="natural"
        />

And the result is like this (the dashed line):

I have the next condition: where the dashed line is under the continuous line, the dashed line should remain blue, while where is over the continuous line it should be red, like this:

I tried with a custom SVG Line (at leas to draw the line first) but it was not successful:

const SavingsLine = props => {
    const {x, y, data} = props
    return data.map(element => {
      return (
        <Line
          x1={data[0].y}
          y1={data[data.length - 1].x}
          x2={element.x}
          y2={element.y}
          stroke="green"
          strokeDasharray={savingsStrokeDash}
          strokeWidth={2}
        />
      )
    })
  }

Can anyone help me with this? Thank you for your time!