add README section for range

Author: Christoph Pader

README.md

@@ -82,9 +82,9 @@ There are three events fired when the user interacts with the graph:
 2. `onPointSelected`: Fired for each point the user pans through. You can use this event to update labels or highlight selection in the graph.
 3. `onGestureEnd`: Fired once the user releases his finger and the pan gesture _deactivates_.
 
-Pan gesture can be configures using these props:
+The pan gesture can be configured using these props:
 
-1. `panGestureTimeout`: Set timeout for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.
+1. `panGestureDelay`: Set delay for the pan gesture to activate. Set to `0` to start immediately after touch. Defaults to `300`.
 
 Example:
 
@@ -124,6 +124,41 @@ Example:
 />
 ```
 
+### `Range`
+
+<img src="./img/range.png" align="right" height="150" />
+
+Used to define a range for the graph canvas
+
+This range has to be bigger than the span of the provided data points. This feature can be used, e.g. if the graph should show a fixed timeframe, whether there's data for that period or not.
+
+<br />
+<br />
+
+This example shows data in the timeframe between 01/01/2000 to 01/31/2000 and caps the value between 0 and 200:
+
+```jsx
+<LineGraph
+  points={priceHistory}
+  animated={true}
+  color="#4484B2"
+  enablePanGesture={true}
+  range={{
+    x: {
+      min: new Date(new Date(2000, 1, 1).getTime()),
+      max: new Date(
+        new Date(2000, 1, 1).getTime() +
+        31 * 1000 * 60 * 60 * 24
+      )
+    },
+    y: {
+      min: 0,
+      max: 200
+    }
+  }}
+/>
+```
+
 ---
 
 ### `SelectionDot`