title: How do I add Gradient Colour to this React Native Chart?
body: <p><strong>Current Implementation:</strong></p>
  <p><a href="https://i.stack.imgur.com/qsHpt.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qsHpt.png" alt="enter image description here" /></a></p>
  <p>This is a Chart using react-native-svg library with a tool-tip added to it. I want to make the color of the line into a gradient rather than a single color</p>
  <p><strong>Code:</strong></p>
  <pre><code>import React, { useState } from 'react'
  import { View, Text, Dimensions } from 'react-native'
  import { LineChart } from 'react-native-chart-kit'
  import { Rect, Text as TextSVG, Svg } from &quot;react-native-svg&quot;;
  
  const Charts = () =&gt; {
      let [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0, visible: false, value: 0 })
  
      return (
          &lt;View&gt;
              &lt;LineChart
                  data={{
                      labels: [&quot;January&quot;, &quot;February&quot;, &quot;March&quot;, &quot;April&quot;, &quot;May&quot;, &quot;June&quot;],
                      datasets: [
                          {
                              data: [
                                  100, 110, 90, 130, 80, 103
                              ]
                          }
                      ]
                  }}
                  width={Dimensions.get(&quot;window&quot;).width}
                  height={250}
                  yAxisLabel=&quot;$&quot;
                  yAxisSuffix=&quot;k&quot;
                  yAxisInterval={1}
                  chartConfig={{
                      backgroundColor: &quot;white&quot;,
                      backgroundGradientFrom: &quot;#fbfbfb&quot;,
                      backgroundGradientTo: &quot;#fbfbfb&quot;,
                      decimalPlaces: 2,
                      color: (opacity = 1) =&gt; `rgba(0, 0, 0, ${opacity})`,
                      labelColor: (opacity = 1) =&gt; `rgba(0, 0, 0, ${opacity})`,
                      style: {
                          borderRadius: 0
                      },
                      propsForDots: {
                          r: &quot;6&quot;,
                          strokeWidth: &quot;0&quot;,
                          stroke: &quot;#fbfbfb&quot;
                      }
                  }}
                  bezier
                  style={{
                      marginVertical: 8,
                      borderRadius: 6
                  }}
  
                  decorator={() =&gt; {
                      return tooltipPos.visible ? &lt;View&gt;
                          &lt;Svg&gt;
                              &lt;Rect x={tooltipPos.x - 15} 
                                  y={tooltipPos.y + 10} 
                                  width=&quot;40&quot; 
                                  height=&quot;30&quot;
                                  fill=&quot;black&quot; /&gt;
                                  &lt;TextSVG
                                      x={tooltipPos.x + 5}
                                      y={tooltipPos.y + 30}
                                      fill=&quot;white&quot;
                                      fontSize=&quot;16&quot;
                                      fontWeight=&quot;bold&quot;
                                      textAnchor=&quot;middle&quot;&gt;
                                      {tooltipPos.value}
                                  &lt;/TextSVG&gt;
                          &lt;/Svg&gt;
                      &lt;/View&gt; : null
                  }}
  
                  onDataPointClick={(data) =&gt; {
  
                      let isSamePoint = (tooltipPos.x === data.x 
                                          &amp;&amp; tooltipPos.y === data.y)
  
                      isSamePoint ? setTooltipPos((previousState) =&gt; {
                          return { 
                                    ...previousState,
                                    value: data.value,
                                    visible: !previousState.visible
                                 }
                      })
                          : 
                      setTooltipPos({ x: data.x, value: data.value, y: data.y, visible: true });
  
                  }}
              /&gt;
          &lt;/View&gt;
      )
  }
  
  export default Charts
  </code></pre>
  <p><strong>QUESTION:</strong>
  Instead of the chart having just grey, I want the color of the chart as red when it goes above a specific threshold, yellow for another value and green for the lowest value.</p>
  <p>Like this somewhat: <a href="https://i.stack.imgur.com/lQeKT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQeKT.png" alt="enter image description here" /></a></p>
  <p><strong>What I found:</strong></p>
  <pre><code>render() {
  
      const data = [ 50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80 ]
  
      const Gradient = () =&gt; (
        &lt;Defs key={'gradient'}&gt;
          &lt;LinearGradient id={'gradient'} x1={'0'} y={'0%'} x2={'100%'} y2={'0%'}&gt;
            &lt;Stop offset={'0%'} stopColor={'rgb(134, 65, 244)'}/&gt;
            &lt;Stop offset={'100%'} stopColor={'rgb(66, 194, 244)'}/&gt;
          &lt;/LinearGradient&gt;
        &lt;/Defs&gt;
      )
  
      return (
        &lt;LineChart
          style={ { height: 200 } }
          data={ data }
          contentInset={ { top: 20, bottom: 20 } }
          svg={{
            strokeWidth: 2,
            stroke: 'url(#gradient)',
          }}
        &gt;
          &lt;Grid/&gt;
          &lt;Gradient/&gt;
        &lt;/LineChart&gt;
      )
    }
  </code></pre>
  <p>I am not able to integrate the two. Please help.</p>