add renderLineGradient for area-chart (#25)

* add `renderLineGradient` for area-chart
JesperLekland · Jan 24, 2018 · bd6f30a · bd6f30a
1 parent 0cea679
commit bd6f30a
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -138,6 +138,9 @@ class AreaChartExample extends React.PureComponent {
 #### Props
 
 See [Common Props](#common-props)
+| Property | Default | Description |
+| --- | --- | --- |
+| renderLineGradient | undefined | The same as `renderGradient` but for the line in the chart  |
 
 ### StackedAreaChart
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-svg-charts",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": false,
   "description": "Customizable charts (Line, Bar, Area, Pie, Circle, Waterfall, Progress) for React Native",
   "main": "src/index.js",

diff --git a/src/area-chart.js b/src/area-chart.js
@@ -28,6 +28,7 @@ class AreaChart extends PureComponent {
                   animationDuration,
                   style,
                   renderGradient,
+                  renderLineGradient,
                   curve,
                   showGrid,
                   numberOfTicks,
@@ -102,6 +103,7 @@ class AreaChart extends PureComponent {
                         { showGrid && renderGrid({ x, y, ticks, dataPoints, gridProps }) }
                         <Defs>
                             { renderGradient && renderGradient({ id: 'gradient', width, height, x, y }) }
+                            { renderLineGradient && renderLineGradient({ id: 'line-gradient', width, height, x, y }) }
                         </Defs>
                         <Path
                             { ...svg }
@@ -113,6 +115,7 @@ class AreaChart extends PureComponent {
                         />
                         <Path
                             { ...svg }
+                            stroke={ renderLineGradient ? 'url(#line-gradient)' : svg.stroke }
                             animate={animate}
                             animationDuration={animationDuration}
                             d={ line }
@@ -150,6 +153,7 @@ AreaChart.propTypes = {
     gridMax: PropTypes.number,
     // see https://github.com/react-native-community/react-native-svg#lineargradient for more info
     renderGradient: PropTypes.func,
+    renderLineGradient: PropTypes.func,
     curve: PropTypes.func,
     renderGrid: PropTypes.func,
 }

diff --git a/storybook/stories/gradient.js b/storybook/stories/gradient.js
@@ -19,6 +19,12 @@ class GradientExample extends React.PureComponent {
                         <Stop offset={ '100%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.2 }/>
                     </LinearGradient>
                 ) }
+                renderLineGradient={ ({ id }) => (
+                    <LinearGradient id={ id } x1={ '0%' } y={ '0%' } x2={ '0%' } y2={ '100%' }>
+                        <Stop offset={ '0%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.8 }/>
+                        <Stop offset={ '100%' } stopColor={ 'rgb(134, 65, 244)' } stopOpacity={ 0.2 }/>
+                    </LinearGradient>
+                ) }
             />
         )
     }