Show different colors for a line which lies in range in line chart in react native line chart wrapper

Question

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.

Please help.. Added the details in this as well

Answer 1

I encountered this issue too and solved it by adding colors array to the config object when each color represent the Nth line in the graph. Please notice this would work only when the graph mode is 'LINEAR' or 'STEPPED' (and not BEZIER). have this config as an example:

config: {
  colors: [processColor('green'), processColor('blue'), processColor('red')],
  circleColors: [processColor('green'), processColor('blue'), processColor('red'), processColor('pink')],
  lineWidth: 2,
  drawCircleHole: false,
  highlightColor: HIGHLIGHT_COLOR,
  circleRadius: 4,
  mode: 'LINEAR',
}

this would result a graph with 4 points (depends on the values you would give) when the first point and line are green, second is blue, third is red, and only fourth point is pink.