From ebf322799ba592783b3d44a926ce10903fa44cba Mon Sep 17 00:00:00 2001
From: Louis Lagrange <lagrange.louis@gmail.com>
Date: Sat, 2 Sep 2017 17:01:37 +0200
Subject: [PATCH 1/5] Upgrade to RN 0.47.2 (#184)

---
 example/ios/example.xcodeproj/project.pbxproj | 4 ++--
 example/ios/project.pbxproj                   | 2 +-
 example/package.json                          | 2 +-
 package.json                                  | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/example/ios/example.xcodeproj/project.pbxproj b/example/ios/example.xcodeproj/project.pbxproj
index 083424d..ff51e47 100644
--- a/example/ios/example.xcodeproj/project.pbxproj
+++ b/example/ios/example.xcodeproj/project.pbxproj
@@ -878,7 +878,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 		2D02E4CB1E0B4B27006451C7 /* Bundle React Native Code And Images */ = {
 			isa = PBXShellScriptBuildPhase;
@@ -892,7 +892,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 		};
 /* End PBXShellScriptBuildPhase section */
 
diff --git a/example/ios/project.pbxproj b/example/ios/project.pbxproj
index f3a0dd6..bf3e0aa 100644
--- a/example/ios/project.pbxproj
+++ b/example/ios/project.pbxproj
@@ -531,7 +531,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 			shellPath = /bin/sh;
-			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/packager/react-native-xcode.sh";
+			shellScript = "export NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh";
 			showEnvVarsInLog = 1;
 		};
 /* End PBXShellScriptBuildPhase section */
diff --git a/example/package.json b/example/package.json
index 99fa876..f84d753 100644
--- a/example/package.json
+++ b/example/package.json
@@ -9,7 +9,7 @@
   "dependencies": {
     "moment": "^2.17.1",
     "react": "16.0.0-alpha.12",
-    "react-native": "~0.46.1",
+    "react-native": "0.47.2",
     "react-native-pathjs-charts": "file:../",
     "react-native-side-menu": "^0.20.1",
     "react-navigation": "^1.0.0-beta.9"
diff --git a/package.json b/package.json
index bf8c37a..0010efb 100644
--- a/package.json
+++ b/package.json
@@ -40,7 +40,7 @@
     "babel-polyfill": "^6.23.0",
     "lodash": "^4.12.0",
     "paths-js": "^0.4.5",
-    "react-native-svg": "~5.3.0"
+    "react-native-svg": "~5.4.0"
   },
   "devDependencies": {
     "babel-jest": "*",
@@ -50,7 +50,7 @@
     "jest-react-native": "*",
     "react": "16.0.0-alpha.12",
     "react-dom": "16.0.0-alpha.12",
-    "react-native": "~0.46.1",
+    "react-native": "0.47.2",
     "react-test-renderer": "16.0.0-alpha.12"
   },
   "jest": {

From 0111246285ab38febafe26332a3532d49d281e26 Mon Sep 17 00:00:00 2001
From: Bret Marzolf <marzolfb@users.noreply.github.com>
Date: Sat, 2 Sep 2017 09:00:41 -0700
Subject: [PATCH 2/5] New release for .31 (#187)

---
 CHANGELOG.md | 18 ++++++++++++++++--
 package.json |  2 +-
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14285b9..1b0c4f2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,7 +1,21 @@
 # Change Log
 
-## [v0.0.30](https://github.com/capitalone/react-native-pathjs-charts/tree/v0.0.30) (2017-07-12)
-[Full Changelog](https://github.com/capitalone/react-native-pathjs-charts/compare/0.0.29...v0.0.30)
+## [0.0.31](https://github.com/capitalone/react-native-pathjs-charts/tree/HEAD)
+
+[Full Changelog](https://github.com/capitalone/react-native-pathjs-charts/compare/0.0.30...HEAD)
+
+**Closed issues:**
+
+- The sort method cannot be invoked on an Immutable data structure. [\#178](https://github.com/capitalone/react-native-pathjs-charts/issues/178)
+- Build failed in RN 0.45.1 \(iOS\) [\#169](https://github.com/capitalone/react-native-pathjs-charts/issues/169)
+
+**Merged pull requests:**
+
+- Upgrade to RN 0.47.2 [\#184](https://github.com/capitalone/react-native-pathjs-charts/pull/184) ([Minishlink](https://github.com/Minishlink))
+- Upgrade to .30 [\#171](https://github.com/capitalone/react-native-pathjs-charts/pull/171) ([marzolfb](https://github.com/marzolfb))
+
+## [0.0.30](https://github.com/capitalone/react-native-pathjs-charts/tree/0.0.30) (2017-07-12)
+[Full Changelog](https://github.com/capitalone/react-native-pathjs-charts/compare/0.0.29...0.0.30)
 
 **Closed issues:**
 
diff --git a/package.json b/package.json
index 0010efb..3dcc299 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-pathjs-charts",
-  "version": "0.0.30",
+  "version": "0.0.31",
   "description": "Cross platform React Native charting library based on path-js and react-native-svg",
   "repository": {
     "type": "git",

From 88b76ce826cc80da51c005a6ba70876b5d346a0a Mon Sep 17 00:00:00 2001
From: Amaury Liet <amaury.liet@hotmail.fr>
Date: Sat, 30 Sep 2017 02:38:51 +0200
Subject: [PATCH 3/5] Feature/improve smoothline chart (#183)

* Add strokeDasharray

Allow functions as options to specify per graph settings.

* Display points over graph

* Fix tests

* Add dynamicLineRendering test
---
 example/src/App.js                            |   6 +
 example/src/Menu.js                           |   5 +
 example/src/stockline/StockLineChartBasic.js  |  16 +-
 .../StockLineChartDynamicLineRendering.js     | 272 +++++++++++++++
 .../StockLineChartDynamicTickLabels.js        |  19 +-
 src/Line.js                                   | 320 ++++++++++++------
 .../SmoothLineBasic-test.js.snap              |   4 +
 .../SmoothLineRegions-test.js.snap            |   4 +
 .../SmoothLineRegionsExtended-test.js.snap    |   4 +
 .../__snapshots__/StockLineBasic-test.js.snap |   6 +
 .../StockLineDynamicTickLabels-test.js.snap   |   2 +
 .../StockLineStaticTickLabels-test.js.snap    |   2 +
 12 files changed, 531 insertions(+), 129 deletions(-)
 create mode 100644 example/src/stockline/StockLineChartDynamicLineRendering.js

diff --git a/example/src/App.js b/example/src/App.js
index f2bb969..ffc1de6 100644
--- a/example/src/App.js
+++ b/example/src/App.js
@@ -30,6 +30,7 @@ import PieChartBasic from './pie/PieChartBasic'
 import StockLineChartBasic from './stockline/StockLineChartBasic'
 import StockLineChartStaticTickLabels from './stockline/StockLineChartStaticTickLabels'
 import StockLineChartDynamicTickLabels from './stockline/StockLineChartDynamicTickLabels'
+import StockLineChartDynamicLineRendering from './stockline/StockLineChartDynamicLineRendering'
 
 import SmoothLineChartBasic from './smoothline/SmoothLineChartBasic'
 import SmoothLineChartRegions from './smoothline/SmoothLineChartRegions'
@@ -82,6 +83,10 @@ class HomeScreen extends React.Component {
           onPress={() => navigate('StockLineChartDynamicTickLabels')}
           title="StockLine - Dynamic Labels"
         />
+        <Button
+          onPress={() => navigate('StockLineChartDynamicLineRendering')}
+          title="StockLine - Dynamic Line Rendering"
+        />
         <Button
           onPress={() => navigate('SmoothLineChartBasic')}
           title="SmoothLine - Basic"
@@ -118,6 +123,7 @@ const App = StackNavigator({
   StockLineChartBasic: { screen: StockLineChartBasic },
   StockLineChartStaticTickLabels: { screen: StockLineChartStaticTickLabels },
   StockLineChartDynamicTickLabels: { screen: StockLineChartDynamicTickLabels },
+  StockLineChartDynamicLineRendering: { screen: StockLineChartDynamicLineRendering },
   SmoothLineChartBasic: { screen: SmoothLineChartBasic },
   SmoothLineChartRegions: { screen: SmoothLineChartRegions },
   SmoothLineChartRegionsExtended: { screen: SmoothLineChartRegionsExtended },
diff --git a/example/src/Menu.js b/example/src/Menu.js
index 56b0ea8..cb68db2 100644
--- a/example/src/Menu.js
+++ b/example/src/Menu.js
@@ -118,6 +118,11 @@ class Menu extends Component {
             style={styles.subitem}>
             StockLine w/Dynamic Tick Labels
           </Text>
+          <Text
+            onPress={() => this.props.onItemSelected('StockLineChartDynamicLineRendering')}
+            style={styles.subitem}>
+            StockLine w/Dynamic Line Rendering
+          </Text>
         </View>
         {/*End StockLine Charts*/}
 
diff --git a/example/src/stockline/StockLineChartBasic.js b/example/src/stockline/StockLineChartBasic.js
index 94a2073..43cd10c 100644
--- a/example/src/stockline/StockLineChartBasic.js
+++ b/example/src/stockline/StockLineChartBasic.js
@@ -16,12 +16,12 @@ SPDX-Copyright: Copyright (c) Capital One Services, LLC
 SPDX-License-Identifier: Apache-2.0
 */
 
-'use strict'
+'use strict';
 
 import React, { Component } from 'react';
-import { View, Text, StyleSheet } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 
-import { StockLine } from 'react-native-pathjs-charts'
+import { StockLine } from 'react-native-pathjs-charts';
 
 const styles = StyleSheet.create({
   container: {
@@ -37,7 +37,7 @@ class StockLineChartBasic extends Component {
     title: `StockLine - Basic`,
   });
   render() {
-    let data = [
+    const data = [
       [{
         "x": 0,
         "y": 47782
@@ -212,8 +212,8 @@ class StockLineChartBasic extends Component {
         "x": 18,
         "y": 153227
       }]
-    ]
-    let options = {
+    ];
+    const options = {
       width: 250,
       height: 250,
       color: '#2980B9',
@@ -257,13 +257,13 @@ class StockLineChartBasic extends Component {
           fill: '#34495E'
         }
       }
-    }
+    };
 
     return (
       <View style={styles.container}>
         <StockLine data={data} options={options} xKey='x' yKey='y' />
       </View>
-    )
+    );
   }
 }
 
diff --git a/example/src/stockline/StockLineChartDynamicLineRendering.js b/example/src/stockline/StockLineChartDynamicLineRendering.js
new file mode 100644
index 0000000..1175116
--- /dev/null
+++ b/example/src/stockline/StockLineChartDynamicLineRendering.js
@@ -0,0 +1,272 @@
+/*
+Copyright 2016 Capital One Services, LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
+
+SPDX-Copyright: Copyright (c) Capital One Services, LLC
+SPDX-License-Identifier: Apache-2.0
+*/
+
+'use strict';
+
+import React, { Component } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { Text, Circle } from 'react-native-svg';
+
+import { StockLine } from 'react-native-pathjs-charts';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#f7f7f7',
+  },
+});
+
+class StockLineChartDynamicLineRendering extends Component {
+  static navigationOptions = ({ navigation }) => ({
+    title: `StockLine - Dynamic Line Rendering`,
+  });
+  render() {
+    const data = [
+      [{
+        "x": 0,
+        "y": 47782
+      }, {
+        "x": 1,
+        "y": 48497
+      }, {
+        "x": 2,
+        "y": 77128
+      }, {
+        "x": 3,
+        "y": 73413
+      }, {
+        "x": 4,
+        "y": 58257
+      }, {
+        "x": 5,
+        "y": 40579
+      }, {
+        "x": 6,
+        "y": 72893
+      }, {
+        "x": 7,
+        "y": 60663
+      }, {
+        "x": 8,
+        "y": 15715
+      }, {
+        "x": 9,
+        "y": 40305
+      }, {
+        "x": 10,
+        "y": 68592
+      }, {
+        "x": 11,
+        "y": 95664
+      }, {
+        "x": 12,
+        "y": 17908
+      }, {
+        "x": 13,
+        "y": 22838
+      }],
+      [{
+        "x": 0,
+        "y": 132189
+      }, {
+        "x": 1,
+        "y": 61705
+      }, {
+        "x": 2,
+        "y": 154976
+      }, {
+        "x": 3,
+        "y": 81304
+      }, {
+        "x": 4,
+        "y": 172572
+      }, {
+        "x": 5,
+        "y": 140656
+      }, {
+        "x": 6,
+        "y": 148606
+      }, {
+        "x": 7,
+        "y": 53010
+      }, {
+        "x": 8,
+        "y": 110783
+      }, {
+        "x": 9,
+        "y": 196446
+      }, {
+        "x": 10,
+        "y": 117057
+      }, {
+        "x": 11,
+        "y": 186765
+      }, {
+        "x": 12,
+        "y": 174908
+      }, {
+        "x": 13,
+        "y": 75247
+      }, {
+        "x": 14,
+        "y": 192894
+      }, {
+        "x": 15,
+        "y": 150356
+      }],
+      [{
+        "x": 0,
+        "y": 125797
+      }, {
+        "x": 1,
+        "y": 256656
+      }, {
+        "x": 2,
+        "y": 222260
+      }, {
+        "x": 3,
+        "y": 265642
+      }, {
+        "x": 4,
+        "y": 263902
+      }, {
+        "x": 5,
+        "y": 113453
+      }, {
+        "x": 6,
+        "y": 289461
+      }, {
+        "x": 7,
+        "y": 293850
+      }, {
+        "x": 8,
+        "y": 206079
+      }, {
+        "x": 9,
+        "y": 240859
+      }, {
+        "x": 10,
+        "y": 152776
+      }, {
+        "x": 11,
+        "y": 297282
+      }, {
+        "x": 12,
+        "y": 175177
+      }, {
+        "x": 13,
+        "y": 169233
+      }, {
+        "x": 14,
+        "y": 237827
+      }, {
+        "x": 15,
+        "y": 242429
+      }, {
+        "x": 16,
+        "y": 218230
+      }, {
+        "x": 17,
+        "y": 161511
+      }, {
+        "x": 18,
+        "y": 153227
+      }]
+    ];
+    let options = {
+      width: 250,
+      height: 250,
+      color: '#2980B9',
+      margin: {
+        top: 10,
+        left: 35,
+        bottom: 30,
+        right: 10
+      },
+      animate: {
+        type: 'delayed',
+        duration: 200
+      },
+      axisX: {
+        showAxis: true,
+        showLines: true,
+        showLabels: true,
+        showTicks: true,
+        zeroAxis: false,
+        orient: 'bottom',
+        tickValues: [],
+        label: {
+          fontFamily: 'Arial',
+          fontSize: 8,
+          fontWeight: true,
+          fill: '#34495E'
+        }
+      },
+      axisY: {
+        showAxis: true,
+        showLines: true,
+        showLabels: true,
+        showTicks: true,
+        zeroAxis: false,
+        orient: 'left',
+        tickValues: [],
+        label: {
+          fontFamily: 'Arial',
+          fontSize: 8,
+          fontWeight: true,
+          fill: '#34495E'
+        }
+      },
+      strokeWidth: 2,
+
+      showAreas: (curve: number, index: number) => index === 0,
+
+      showPoints: (graphIndex: number, pointIndex: number) =>
+        graphIndex === 1 && pointIndex === data[1].length - 1,
+      renderPoint: () => [
+        <Text
+          key="valueLegend"
+          fontFamily="Arial"
+          fontSize={14}
+          fontWeight="normal"
+          fill="#101010"
+          textAnchor="middle"
+          x={0}
+          y={20}
+        >
+          {data[1][data[1].length - 1].y}
+        </Text>,
+        <Circle key="light" fill='#34495E' cx={0} cy={0} r={10} fillOpacity={0.5} />,
+        <Circle key="full" fill='#34495E' cx={0} cy={0} r={7} fillOpacity={1} />,
+      ],
+
+      strokeDasharray: (curve: number, index: number) => (index === 2 ? [5] : []),
+      strokeOpacity: (curve: number, index: number) => (index === 2 ? 0.3 : 1),
+    };
+
+    return (
+      <View style={styles.container}>
+        <StockLine data={data} options={options} xKey='x' yKey='y' />
+      </View>
+    );
+  }
+}
+
+export default StockLineChartDynamicLineRendering;
diff --git a/example/src/stockline/StockLineChartDynamicTickLabels.js b/example/src/stockline/StockLineChartDynamicTickLabels.js
index b2fd69b..8188df1 100644
--- a/example/src/stockline/StockLineChartDynamicTickLabels.js
+++ b/example/src/stockline/StockLineChartDynamicTickLabels.js
@@ -16,12 +16,13 @@ SPDX-Copyright: Copyright (c) Capital One Services, LLC
 SPDX-License-Identifier: Apache-2.0
 */
 
-'use strict'
+'use strict';
 
-import React, { Component } from 'react'
-import { View, StyleSheet} from 'react-native'
-import { StockLine } from 'react-native-pathjs-charts'
-import moment from 'moment'
+import React, { Component } from 'react';
+import { View, StyleSheet } from 'react-native';
+
+import { StockLine } from 'react-native-pathjs-charts';
+import moment from 'moment';
 
 const styles = StyleSheet.create({
   container: {
@@ -37,7 +38,7 @@ class StockLineChartDynamicTickLabels extends Component {
     title: `StockLine - Dynamic Labels`,
   });
   render() {
-    let data = [
+    const data = [
       [{
         "x": 0,
         "y": 47782
@@ -52,7 +53,7 @@ class StockLineChartDynamicTickLabels extends Component {
         "y": 73413
       }]
     ]
-    let options = {
+    const options = {
       width: 250,
       height: 250,
       color: '#2980B9',
@@ -100,13 +101,13 @@ class StockLineChartDynamicTickLabels extends Component {
           fill: '#34495E'
         }
       }
-    }
+    };
 
     return (
       <View style={styles.container}>
         <StockLine data={data} options={options} xKey='x' yKey='y' />
       </View>
-    )
+    );
   }
 }
 
diff --git a/src/Line.js b/src/Line.js
index 3046ac1..69a5325 100755
--- a/src/Line.js
+++ b/src/Line.js
@@ -16,63 +16,62 @@ SPDX-Copyright: Copyright (c) Capital One Services, LLC
 SPDX-License-Identifier: Apache-2.0
 */
 
-import React,{Component} from 'react'
-import {Text as ReactText}  from 'react-native'
-import Svg,{ G, Path, Rect, Text } from 'react-native-svg'
-import { Colors, Options, cyclic, fontAdapt } from './util'
-import Axis from './Axis'
-import _ from 'lodash'
+import React, { Component } from 'react';
+import { Text as ReactText } from 'react-native';
+import Svg, { G, Path, Rect, Text, Circle } from 'react-native-svg';
+import { Colors, Options, cyclic, fontAdapt } from './util';
+import Axis from './Axis';
+import _ from 'lodash';
 
 export default class LineChart extends Component {
-
   constructor(props, chartType) {
-    super(props)
-    this.chartType = chartType
+    super(props);
+    this.chartType = chartType;
   }
 
   getMaxAndMin(chart, key, scale, chartMin, chartMax) {
-    let maxValue
-    let minValue
-    _.each(chart.curves, function (serie) {
-      let values = _.map(serie.item, function (item) {
-        return item[key]
-      })
-
-      let max = _.max(values)
-      if (maxValue === undefined || max > maxValue) maxValue = max
-      let min = _.min(values)
-      if (minValue === undefined || min < minValue) minValue = min
-
-      maxValue = chartMax > maxValue ? chartMax : maxValue
-      minValue = chartMin < minValue ? chartMin : minValue
-    })
+    let maxValue;
+    let minValue;
+    _.each(chart.curves, function(serie) {
+      let values = _.map(serie.item, function(item) {
+        return item[key];
+      });
+
+      let max = _.max(values);
+      if (maxValue === undefined || max > maxValue) maxValue = max;
+      let min = _.min(values);
+      if (minValue === undefined || min < minValue) minValue = min;
+
+      maxValue = chartMax > maxValue ? chartMax : maxValue;
+      minValue = chartMin < minValue ? chartMin : minValue;
+    });
 
     return {
       minValue: minValue,
       maxValue: maxValue,
       min: scale(minValue),
-      max: scale(maxValue)
-    }
+      max: scale(maxValue),
+    };
   }
 
   color(i) {
-    let color = this.props.options.color
-    if (!_.isString(this.props.options.color)) color = color.color
-    let pallete = this.props.pallete || Colors.mix(color || '#9ac7f7')
-    return Colors.string(cyclic(pallete, i))
+    let color = this.props.options.color;
+    if (!_.isString(this.props.options.color)) color = color.color;
+    let pallete = this.props.pallete || Colors.mix(color || '#9ac7f7');
+    return Colors.string(cyclic(pallete, i));
   }
 
   render() {
-    const noDataMsg = this.props.noDataMessage || 'No data available'
-    if (this.props.data === undefined) return (<ReactText>{noDataMsg}</ReactText>)
+    const noDataMsg = this.props.noDataMessage || 'No data available';
+    if (this.props.data === undefined) return <ReactText>{noDataMsg}</ReactText>;
 
-    let options = new Options(this.props)
+    let options = new Options(this.props);
 
-    let accessor = function (key) {
-      return function (x) {
-        return x[key]
-      }
-    }
+    let accessor = function(key) {
+      return function(x) {
+        return x[key];
+      };
+    };
 
     let chart = this.chartType({
       data: this.props.data,
@@ -82,93 +81,190 @@ export default class LineChart extends Component {
       height: options.chartHeight,
       closed: false,
       min: options.min,
-      max: options.max
-    })
+      max: options.max,
+    });
 
     let chartArea = {
-      x:this.getMaxAndMin(chart,this.props.xKey,chart.xscale),
-      y:this.getMaxAndMin(chart,this.props.yKey,chart.yscale,options.min,options.max),
-      margin:options.margin
-    }
+      x: this.getMaxAndMin(chart, this.props.xKey, chart.xscale),
+      y: this.getMaxAndMin(chart, this.props.yKey, chart.yscale, options.min, options.max),
+      margin: options.margin,
+    };
+
+    let showAreas = typeof this.props.options.showAreas !== 'undefined'
+      ? this.props.options.showAreas
+      : true;
+    let strokeWidth = typeof this.props.options.strokeWidth !== 'undefined'
+      ? this.props.options.strokeWidth
+      : '1';
+    let strokeDasharray = typeof this.props.options.strokeDasharray !== 'undefined'
+      ? this.props.options.strokeDasharray
+      : [];
+    let strokeOpacity = typeof this.props.options.strokeOpacity !== 'undefined'
+      ? this.props.options.strokeOpacity
+      : 1;
+    let lines = _.map(
+      chart.curves,
+      function(c, i) {
+        const strokeWidthForCurve =
+          (typeof strokeWidth === 'function' && strokeWidth(c, i)) || strokeWidth;
+        const strokeDasharrayForCurve =
+          (typeof strokeDasharray === 'function' && strokeDasharray(c, i)) || strokeDasharray;
+        const strokeOpacityForCurve =
+          (typeof strokeOpacity === 'function' && strokeOpacity(c, i)) || strokeOpacity;
+        return (
+          <Path
+            key={'lines' + i}
+            d={c.line.path.print()}
+            stroke={this.color(i)}
+            strokeWidth={strokeWidthForCurve}
+            strokeOpacity={strokeOpacityForCurve}
+            fill="none"
+            strokeDasharray={strokeDasharrayForCurve}
+          />
+        );
+      }.bind(this)
+    );
+    let areas = null;
+
+    let showPoints = typeof this.props.options.showPoints !== 'undefined'
+      ? this.props.options.showPoints
+      : false;
+    let points = !showPoints
+      ? []
+      : _.map(
+          chart.curves,
+          function(c, graphIndex) {
+            return _.map(
+              c.line.path.points(),
+              function(p, pointIndex) {
+                let render = null;
+                if (
+                  (typeof showPoints === 'function' && showPoints(graphIndex, pointIndex)) ||
+                  (typeof showPoints === 'boolean' && showPoints)
+                ) {
+                  return (
+                    <G key={'k' + pointIndex} x={p[0]} y={p[1]}>
+                      {typeof this.props.options.renderPoint === 'function'
+                        ? this.props.options.renderPoint()
+                        : <Circle
+                            fill={this.color(graphIndex)}
+                            cx={0}
+                            cy={0}
+                            r={options.pointRadius || 5}
+                            fillOpacity={1}
+                          />}
+                    </G>
+                  );
+                }
+              }.bind(this)
+            );
+          }.bind(this)
+        );
 
-    let showAreas = typeof(this.props.options.showAreas) !== 'undefined' ? this.props.options.showAreas : true;
-    let strokeWidth = typeof(this.props.options.strokeWidth) !== 'undefined' ? this.props.options.strokeWidth : '1';
-    let lines = _.map(chart.curves, function (c, i) {
-      return <Path key={'lines' + i} d={ c.line.path.print() } stroke={ this.color(i) } strokeWidth={strokeWidth} fill="none"/>
-    }.bind(this))
-    let areas = null
-
-    if(showAreas){
-      areas = _.map(chart.curves, function (c, i) {
-        return <Path key={'areas' + i} d={ c.area.path.print() } fillOpacity={0.5} stroke="none" fill={ this.color(i) }/>
-      }.bind(this))
+    if (showAreas) {
+      areas = _.map(
+        chart.curves,
+        function(c, i) {
+          if (
+            (typeof showAreas === 'function' && showAreas(c, i)) ||
+            typeof showAreas === 'boolean'
+          )
+            return (
+              <Path
+                key={'areas' + i}
+                d={c.area.path.print()}
+                fillOpacity={0.5}
+                stroke="none"
+                fill={this.color(i)}
+              />
+            );
+
+          return null;
+        }.bind(this)
+      );
     }
 
-    let textStyle = fontAdapt(options.label)
-    let regions
-    if(this.props.regions != 'undefined') {
-      let styling = typeof(this.props.regionStyling) != 'undefined' ?
-        this.props.regionStyling : {}
-      let labelOffsetAllRegions = typeof(styling.labelOffset) != 'undefined' ?
-        styling.labelOffset : {}
-
-      regions = _.map(this.props.regions, function (c, i) {
-        let x, y, height, width, y1, y2, labelX, labelY
-
-        let labelOffset = typeof(c.labelOffset) != 'undefined' ?
-          c.labelOffset : {}
-        let labelOffsetLeft = typeof(labelOffsetAllRegions.left) != 'undefined'
-          ? (typeof(labelOffset.left) != 'undefined'
-              ?  labelOffset.left : labelOffsetAllRegions.left) : 20
-        let labelOffsetTop = typeof(labelOffsetAllRegions.top) != 'undefined'
-          ? (typeof(labelOffset.top) != 'undefined'
-              ?  labelOffset.top : labelOffsetAllRegions.top) : 0
-        let fillOpacity = typeof(styling.fillOpacity) != 'undefined'
-          ? (typeof(c.fillOpacity) != 'undefined'
-              ?  c.fillOpacity : styling.fillOpacity) : 0.5
-
-        y1 = chart.yscale(c.from)
-        y2 = chart.yscale(c.to)
-
-        x = 0
-        y = y1
-        height = (y2 - y1)
-        width = chartArea.x.max
-
-        labelX = labelOffsetLeft
-        labelY = y2 + labelOffsetTop
-
-        let regionLabel = typeof(c.label) != 'undefined' ? (
-          <Text fontFamily={textStyle.fontFamily}
+    let textStyle = fontAdapt(options.label);
+    let regions;
+    if (this.props.regions != 'undefined') {
+      let styling = typeof this.props.regionStyling != 'undefined' ? this.props.regionStyling : {};
+      let labelOffsetAllRegions = typeof styling.labelOffset != 'undefined'
+        ? styling.labelOffset
+        : {};
+
+      regions = _.map(
+        this.props.regions,
+        function(c, i) {
+          let x, y, height, width, y1, y2, labelX, labelY;
+
+          let labelOffset = typeof c.labelOffset != 'undefined' ? c.labelOffset : {};
+          let labelOffsetLeft = typeof labelOffsetAllRegions.left != 'undefined'
+            ? typeof labelOffset.left != 'undefined' ? labelOffset.left : labelOffsetAllRegions.left
+            : 20;
+          let labelOffsetTop = typeof labelOffsetAllRegions.top != 'undefined'
+            ? typeof labelOffset.top != 'undefined' ? labelOffset.top : labelOffsetAllRegions.top
+            : 0;
+          let fillOpacity = typeof styling.fillOpacity != 'undefined'
+            ? typeof c.fillOpacity != 'undefined' ? c.fillOpacity : styling.fillOpacity
+            : 0.5;
+
+          y1 = chart.yscale(c.from);
+          y2 = chart.yscale(c.to);
+
+          x = 0;
+          y = y1;
+          height = y2 - y1;
+          width = chartArea.x.max;
+
+          labelX = labelOffsetLeft;
+          labelY = y2 + labelOffsetTop;
+
+          let regionLabel = typeof c.label != 'undefined'
+            ? <Text
+                fontFamily={textStyle.fontFamily}
                 fontSize={textStyle.fontSize}
                 fontWeight={textStyle.fontWeight}
                 fontStyle={textStyle.fontStyle}
                 fill={textStyle.fill}
                 textAnchor="middle"
                 x={labelX}
-                y={labelY}>{ c.label }</Text>
-        ) : null
+                y={labelY}
+              >
+                {c.label}
+              </Text>
+            : null;
 
-        return (
-          <G key={'region' + i}>
-            <Rect key={'region' + i} x={x} y={y} width={width} height={height}
-              fill={c.fill} fillOpacity={fillOpacity}/>
-            {regionLabel}
-          </G>
-        )
-      }.bind(this))
+          return (
+            <G key={'region' + i}>
+              <Rect
+                key={'region' + i}
+                x={x}
+                y={y}
+                width={width}
+                height={height}
+                fill={c.fill}
+                fillOpacity={fillOpacity}
+              />
+              {regionLabel}
+            </G>
+          );
+        }.bind(this)
+      );
     }
 
-    let returnValue = <Svg width={options.width} height={options.height}>
-                  <G x={options.margin.left} y={options.margin.top}>
-                        { regions }
-                        { areas }
-                        { lines }
-                      <Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
-                      <Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
-                  </G>
-              </Svg>
-
-    return returnValue
+    let returnValue = (
+      <Svg width={options.width} height={options.height}>
+        <G x={options.margin.left} y={options.margin.top}>
+          {regions}
+          {areas}
+          {lines}
+          {points}
+          <Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+          <Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
+        </G>
+      </Svg>
+    );
+
+    return returnValue;
   }
 }
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
index 5f015d9..91d3a69 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
@@ -24,12 +24,16 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       d="M NaN NaN C NaN NaN NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN"
       fill="none"
       mockedComponent="svg-Path"
       stroke="#2980b9"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
index 9fed1cf..298de33 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
@@ -162,12 +162,16 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       d="M NaN NaN C NaN NaN NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN"
       fill="none"
       mockedComponent="svg-Path"
       stroke="#2980b9"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
index 5728c11..8f78fe7 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
@@ -162,12 +162,16 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       d="M NaN NaN C NaN NaN NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN"
       fill="none"
       mockedComponent="svg-Path"
       stroke="#2980b9"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">
diff --git a/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
index 72a73ea..479e026 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
@@ -30,18 +30,24 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN"
       fill="none"
       mockedComponent="svg-Path"
       stroke="#2980b9"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN"
       fill="none"
       mockedComponent="svg-Path"
       stroke="#206694"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">
diff --git a/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
index f0045eb..c08e8d2 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
@@ -18,6 +18,8 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">
diff --git a/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
index 1349347..5b32f3d 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
@@ -18,6 +18,8 @@ exports[`test renders an example chart correctly 1`] = `
       fill="none"
       mockedComponent="svg-Path"
       stroke="#3199de"
+      strokeDasharray={Array []}
+      strokeOpacity={1}
       strokeWidth="1" />
     <view
       mockedComponent="svg-G">

From bff54fe011e60b6436a2b32b84b41acce840477b Mon Sep 17 00:00:00 2001
From: Louis Lagrange <lagrange.louis@gmail.com>
Date: Sun, 1 Oct 2017 02:23:41 +0200
Subject: [PATCH 4/5] Fix default pointRadius and add parameters to renderPoint
 (#196)

---
 src/Line.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/Line.js b/src/Line.js
index 69a5325..7fec4e4 100755
--- a/src/Line.js
+++ b/src/Line.js
@@ -145,12 +145,12 @@ export default class LineChart extends Component {
                   return (
                     <G key={'k' + pointIndex} x={p[0]} y={p[1]}>
                       {typeof this.props.options.renderPoint === 'function'
-                        ? this.props.options.renderPoint()
+                        ? this.props.options.renderPoint(graphIndex, pointIndex)
                         : <Circle
                             fill={this.color(graphIndex)}
                             cx={0}
                             cy={0}
-                            r={options.pointRadius || 5}
+                            r={this.props.options.pointRadius || 5}
                             fillOpacity={1}
                           />}
                     </G>

From 3267c55cb1134ca57ad4cb7c1df720a0c307c270 Mon Sep 17 00:00:00 2001
From: Louis Lagrange <lagrange.louis@gmail.com>
Date: Sun, 1 Oct 2017 22:22:37 +0200
Subject: [PATCH 5/5] Fix grid axis appearing on top of the lines (#197)

* Fix grid appearing on top of lines

* Update snapshots

* Add GridAxis to Bar and Scatterplot
---
 src/Axis.js                                   |  16 +--
 src/Bar.js                                    |   4 +-
 src/GridAxis.js                               |  58 ++++++++++
 src/Line.js                                   |   7 +-
 src/Scatterplot.js                            |   3 +
 .../SmoothLineBasic-test.js.snap              |  16 +--
 .../SmoothLineRegions-test.js.snap            |  16 +--
 .../SmoothLineRegionsExtended-test.js.snap    |  16 +--
 .../ScatterplotBasic-test.js.snap             |  16 +--
 .../__snapshots__/StockLineBasic-test.js.snap |  16 +--
 .../StockLineDynamicTickLabels-test.js.snap   |  16 +--
 .../StockLineStaticTickLabels-test.js.snap    | 102 +++++++++---------
 12 files changed, 169 insertions(+), 117 deletions(-)
 create mode 100644 src/GridAxis.js

diff --git a/src/Axis.js b/src/Axis.js
index d772710..5fcdbb3 100644
--- a/src/Axis.js
+++ b/src/Axis.js
@@ -22,7 +22,7 @@ import { fontAdapt } from './util'
 import _ from 'lodash'
 const Pathjs = require('paths-js/path')
 
-class AxisStruct {
+export class AxisStruct {
 
   constructor(scale, options, chartArea, horizontal) {
     this.scale = scale
@@ -129,10 +129,6 @@ export default class Axis extends Component {
       options.color = '#3E90F0'
     }
 
-    if (typeof options.gridColor !== 'string') {
-      options.gridColor = '#3E90F0'
-    }
-
     if (typeof options.opacity !== 'number') {
       options.opacity = 0.5
     }
@@ -179,13 +175,6 @@ export default class Axis extends Component {
       return returnValue
     })
 
-
-    const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
-      return (
-               <Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
-            )
-    }) : []
-
     let offset = {
       x: chartArea.margin.left * -1,
       y: chartArea.margin.top * -1
@@ -198,9 +187,6 @@ export default class Axis extends Component {
                 {options.showAxis ? <Path d={axis.path.print()} strokeOpacity={options.opacity} stroke={options.color} strokeWidth={options.strokeWidth} fill="none"/> : null}
               </G>
               {ticks}
-              <G x={offset.x} y={offset.y}>
-                {gridLines}
-              </G>
             </G>
 
     return returnV
diff --git a/src/Bar.js b/src/Bar.js
index 0bab4a1..aedf57d 100644
--- a/src/Bar.js
+++ b/src/Bar.js
@@ -22,6 +22,7 @@ import Svg,{ G, Path, Text } from 'react-native-svg'
 import { Colors, Options, fontAdapt, cyclic, color, identity } from './util'
 import _ from 'lodash'
 import Axis from './Axis'
+import GridAxis from './GridAxis'
 const Bar = require('paths-js/bar')
 import 'babel-polyfill'
 
@@ -147,8 +148,9 @@ export default class BarChart extends Component {
 
     return (<Svg width={options.width} height={options.height}>
               <G x={options.margin.left} y={options.margin.top}>
-                <Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
+                <GridAxis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
                 {lines}
+                <Axis scale={chart.scale} options={options.axisY} chartArea={chartArea} />
               </G>
             </Svg>)
   }
diff --git a/src/GridAxis.js b/src/GridAxis.js
new file mode 100644
index 0000000..343f2f4
--- /dev/null
+++ b/src/GridAxis.js
@@ -0,0 +1,58 @@
+/*
+Copyright 2016 Capital One Services, LLC
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations under the License.
+
+SPDX-Copyright: Copyright (c) Capital One Services, LLC
+SPDX-License-Identifier: Apache-2.0
+*/
+
+import React, { Component } from 'react'
+import { G, Path } from 'react-native-svg'
+import _ from 'lodash'
+import { AxisStruct } from './Axis'
+
+export default class GridAxis extends Component {
+
+  render() {
+    const { chartArea, options, scale } = this.props
+    const horizontal = options.orient ==='top' || options.orient ==='bottom'
+
+    const axis = new AxisStruct(scale,options,chartArea,horizontal).axis()
+
+    if (typeof options.gridColor !== 'string') {
+      options.gridColor = '#3E90F0'
+    }
+
+    if (typeof options.opacity !== 'number') {
+      options.opacity = 0.5
+    }
+
+    const gridLines = options.showLines ? _.map(axis.lines, function (c, i) {
+      return (
+               <Path key={'gridLines' + i} d={c.print()} strokeOpacity={options.opacity} stroke={options.gridColor} fill="none"/>
+            )
+    }) : []
+
+    let offset = {
+      x: chartArea.margin.left * -1,
+      y: chartArea.margin.top * -1
+    };
+
+    let returnV = <G x={offset.x} y={offset.y}>
+      {gridLines}
+    </G>;
+
+    return returnV
+
+  }
+}
diff --git a/src/Line.js b/src/Line.js
index 7fec4e4..664a01e 100755
--- a/src/Line.js
+++ b/src/Line.js
@@ -21,6 +21,7 @@ import { Text as ReactText } from 'react-native';
 import Svg, { G, Path, Rect, Text, Circle } from 'react-native-svg';
 import { Colors, Options, cyclic, fontAdapt } from './util';
 import Axis from './Axis';
+import GridAxis from './GridAxis';
 import _ from 'lodash';
 
 export default class LineChart extends Component {
@@ -255,12 +256,14 @@ export default class LineChart extends Component {
     let returnValue = (
       <Svg width={options.width} height={options.height}>
         <G x={options.margin.left} y={options.margin.top}>
+          <GridAxis key="grid-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+          <GridAxis key="grid-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
           {regions}
           {areas}
           {lines}
           {points}
-          <Axis key="x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
-          <Axis key="y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
+          <Axis key="axis-x" scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+          <Axis key="axis-y" scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
         </G>
       </Svg>
     );
diff --git a/src/Scatterplot.js b/src/Scatterplot.js
index ba5a417..43f6be2 100755
--- a/src/Scatterplot.js
+++ b/src/Scatterplot.js
@@ -21,6 +21,7 @@ import {Text as ReactText}  from 'react-native'
 import Svg,{ Circle, G } from 'react-native-svg'
 import { Options, styleSvg } from './util'
 import Axis from './Axis'
+import GridAxis from './GridAxis'
 import _ from 'lodash'
 import 'babel-polyfill'
 
@@ -139,6 +140,8 @@ export default class Scatterplot extends Component {
 
     return (<Svg width={options.width} height={options.height}>
             <G x={options.margin.left} y={options.margin.top}>
+                <GridAxis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
+                <GridAxis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
                 { points }
                 <Axis scale={chart.xscale} options={options.axisX} chartArea={chartArea} />
                 <Axis scale={chart.yscale} options={options.axisY} chartArea={chartArea} />
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
index 91d3a69..f6ad6ca 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       d="M NaN NaN C NaN NaN NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN S NaN NaN NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -49,10 +57,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -68,10 +72,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
index 298de33..7b4edf7 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegions-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       mockedComponent="svg-G">
       <view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
index 8f78fe7..d55183b 100644
--- a/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
+++ b/src/__tests__/SmoothLine/__snapshots__/SmoothLineRegionsExtended-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={45}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-45}
+      y={-20} />
     <view
       mockedComponent="svg-G">
       <view
@@ -187,10 +195,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -206,10 +210,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-45}
-        y={-20} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap b/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap
index 828aad4..b42607f 100644
--- a/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap
+++ b/src/__tests__/scatterplot/__snapshots__/ScatterplotBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={40}
     y={20}>
+    <view
+      mockedComponent="svg-G"
+      x={-40}
+      y={-20} />
+    <view
+      mockedComponent="svg-G"
+      x={-40}
+      y={-20} />
     <view
       mockedComponent="svg-G"
       x={NaN}
@@ -637,10 +645,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-40}
-        y={-20} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -656,10 +660,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-40}
-        y={-20} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
index 479e026..6acb9a3 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineBasic-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={35}
     y={10}>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -63,10 +71,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -82,10 +86,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
index c08e8d2..99b9955 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineDynamicTickLabels-test.js.snap
@@ -7,6 +7,14 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={35}
     y={10}>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -35,10 +43,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
     <view
       mockedComponent="svg-G">
@@ -54,10 +58,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
   </view>
 </view>
diff --git a/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap b/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
index 5b32f3d..041291d 100644
--- a/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
+++ b/src/__tests__/stockline/__snapshots__/StockLineStaticTickLabels-test.js.snap
@@ -7,6 +7,57 @@ exports[`test renders an example chart correctly 1`] = `
     mockedComponent="svg-G"
     x={35}
     y={10}>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10}>
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+      <view
+        d="M NaN NaN L NaN NaN"
+        fill="none"
+        mockedComponent="svg-Path"
+        stroke="#3E90F0"
+        strokeOpacity={0.5} />
+    </view>
+    <view
+      mockedComponent="svg-G"
+      x={-35}
+      y={-10} />
     <view
       d="M NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN L NaN NaN Z "
       fill="#3199de"
@@ -203,53 +254,6 @@ exports[`test renders an example chart correctly 1`] = `
           name7
         </view>
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10}>
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-        <view
-          d="M NaN NaN L NaN NaN"
-          fill="none"
-          mockedComponent="svg-Path"
-          stroke="#3E90F0"
-          strokeOpacity={0.5} />
-      </view>
     </view>
     <view
       mockedComponent="svg-G">
@@ -265,10 +269,6 @@ exports[`test renders an example chart correctly 1`] = `
           strokeOpacity={0.5}
           strokeWidth={3} />
       </view>
-      <view
-        mockedComponent="svg-G"
-        x={-35}
-        y={-10} />
     </view>
   </view>
 </view>