1

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. enter image description here

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

christo-pher18
  • 145
  • 1
  • 14
  • Re - able to add different colors based on the condition. circleColors property which returns array. But still not able to customize the color of line based on the condition. – christo-pher18 Oct 24 '22 at 05:43

1 Answers1

0

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.

shai
  • 1