Need to show lines in different colors for if lies in some range in line chart

[christopher-18]

Hi, I need to show the line chart with when plotted if lies in some range should be shown with some different color. Something like this . But not having any idea how to show.

Till now i have used these -

  <LineChart
          style={{flex:1}
          xAxis={{
            position: 'BOTTOM',
            drawGridLines: false,
            avoidFirstLastClipping: true,
            granularityEnabled: true,
            granularity: 1,
            valueFormatter: xAxisFormat,
            valueFormatterPattern: 'dd MMM',
            timeUnit: 'DAYS',
            axisLineWidth: 0,
            textColor: processColor(#ff6u79),
            textSize: 10,
          }}
          yAxis={{
            left: {
              textColor:processColor(#ff6u79,
              textSize: 10,
              axisLineWidth: 0,
              granularityEnabled: true,
              granularity: 1,
              axisMaximum: 120,
              axisMinimum: 80 
              gridDashedLine: { lineLength: 5, spaceLength: 5 },
              gridColor: processColor('#c1c9c4'),
            },
            right: { enabled: false }, 
          }}
          dragEnabled={false}
          drawBorders={false}
          data={data}
          animation={{ durationX: 1000 }}
          onSelect={() => console.log('on select')}
          onChange={(event) => console.log(event.nativeEvent)}
        />

And my data set is used as -

[{x: '08 Oct 2022 05:29', y: 78}, {x: '10 Oct 2022 05:29', y: 200}, {x: '10 Oct 2022 05:29', y: 80}, {x: '12 Oct 2022 05:29', y: 120}, {x: '18 Oct 2022 10:17', y: 90}, {x: '20 Oct 2022 11:37', y: 78}]

Stuck here. Please help.

[DobbyWinky]

+1 I too have a similar problem