Multicolor line chart based on y-axis value range

[Jaleelgz]

How to show multicolor line chart based on y-axis value range, for example :

<LineChart
          areaChart={true}
          startFillColor="#E8F7F6"
          endFillColor="#E8F7F6"
          data={graphData}
          height={100}
          parentWidth={containerWidth}
          hideDataPoints={true}
          initialSpacing={0}
          endSpacing={0}
          adjustToWidth={true}
          disableScroll={true}
          xAxisColor={'#E5E5EF'}
          yAxisColor={COLORS.TRANSPARENT}
          isAnimated={Boolean(Platform == 'ios')}
          hideYAxisText={true}
          yAxisLabelWidth={0}
          yAxisTextStyle={{
            ...GLOBAL_STYLES.b4_10_400,
            color: COLORS.TERTIARY_T500,
          }}
          xAxisLabelTextStyle={{
            ...GLOBAL_STYLES.b4_10_400,
            fontSize: 7,
            color: COLORS.TERTIARY_T800,
          }}
          xAxisLabelsHeight={0}
          animateOnDataChange={Boolean(Platform == 'ios')}
          color={COLORS.HEART_RATE_RESTING}
          thickness={1.5}
          focusEnabled={true}
          stepValue={110}
          maxValue={220}
          noOfSections={2}
          lineGradient
          lineGradientId="ggrd"
          lineGradientComponent={() => {
            return (
              <LinearGradient id="ggrd" x1="0%" y1="0%" x2="0%" y2="100%">
                <Stop offset="0%" stopColor={COLORS.HEART_RATE_HIGH} /> {/* 162– and above */}
                <Stop offset="30%" stopColor={COLORS.HEART_RATE_CARDIO} /> {/* 133–162 */}
                <Stop offset="40%" stopColor={COLORS.HEART_RATE_FAT_BURN} /> {/* 100–133 */}
                <Stop offset="100%" stopColor={COLORS.HEART_RATE_RESTING} /> {/* upto 100 */}
              </LinearGradient>
            );
          }}
        />

i need this color range :

color -> value range

#E22F37 -> {/* 162– and above /}
#FBCFFB -> {/ 133–162 /}
#FFBE5F -> {/ 100–133 /}
#90E4A8 -> {/ upto 100 */}

[Abhinandan-Kushwaha]

Hi @Jaleelgz The library currently supports only a single highlightedRange through which you can change the color of the line lying in a given y-range. But your use case of multiple colors based on y-values is not yet supported.
However, you might consider using gradient, which supports multiple colors- https://gifted-charts.web.app/linechart/#multicolor

See #1179

[Abhinandan-Kushwaha]

Hi @Jaleelgz I have added a new prop name colors which accepts an array of objects of type ColorFromToY described below-

type ColorFromToY = {
  from: number
  to: number
  color: ColorValue
}

This is available from versions 1.4.67 onwards.
See https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/releases/tag/v1.4.67

[Abhinandan-Kushwaha]

Hi @Jaleelgz Since there are multiople ways to apply multi-color, I have documented them all here- https://github.com/Abhinandan-Kushwaha/react-native-gifted-charts/blob/master/docs/LineChart/LineChartProps.md#different-ways-to-multi-color