[docs] add configuration and navigation docs

docs/basic/heatmap.md

@@ -16,6 +16,9 @@ let data = {
 	end: endDate
 }
 ```
+(We are working on making the start date and end date implicit and optional).
+
+The chart is rendered by the type `heatmap`:
 
 ```js
 let chart = new Chart("#heatmap", {
@@ -29,6 +32,13 @@ let chart = new Chart("#heatmap", {
 	}">
 </project-demo>
 
+Setting `discreteDomains` to `0` allows for a continous distribution of heat squares (as on GitHub), rather than showing the month-wise separation. A different set of colors can also be specified.
+
+```js
+discreteDomains: 0, // default 1
+colors: ['#ebedf0', '#c0ddf9', '#73b3f3', '#3886e1', '#17459e'],
+```
+
 <project-demo data="heatmap-data" v-bind:config="{
 		title: 'Monthly Distribution',
         type: 'heatmap',
@@ -57,11 +67,4 @@ let chart = new Chart("#heatmap", {
 		}
 	]">
 </project-demo>
-(We are working on making the start date and end date implicit and optional). [tip]
-
-The chart is rendered by the type `heatmap`:
-
-```js
-
-```
 

docs/reference/configuration.md

@@ -133,13 +133,13 @@ Set the height of the chart in pixels.
  - Values: `span | tick`
  - Default: `span`
 
-Foo
+Display axis points as short ticks or long spanning lines.
 
 #### xIsSeries
  - Type: `Boolean`
  - Default: `0`
 
-Foo
+The X axis (often the time axis) is usually continuous. That means we can reduce the redundancy of rendering every X label by setting `xIsSeries` to `1` and allowing only a few periodic ones.
 
 ---
 
@@ -147,14 +147,19 @@ Foo
  - Type: `Object`
  - Default: `{}`
 
+Customizing options for the format of the label and value displayed on hover tooltips.
+
 ####
+ - Type: `function`
+ - Default: `{}`
+
 ---
 
 ### barOptions
  - Type: `Object`
  - Default: `{}`
 
-This option controls how width of each `column` is calculated in the chart.
+Can be used to set various properties on bar plots.
 
 #### spaceRatio
  - Type: `Number`
@@ -162,17 +167,21 @@ This option controls how width of each `column` is calculated in the chart.
  - Max: `2`
  - Default: `0.5`
 
+In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the <b>ratio of the space</b> between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
+
 #### stacked
  - Type: `Boolean`
  - Default: `0`
 
+Renders multiple bar datasets in a stacked configuration, rather than the default adjacent.
+
 ---
 
 ### lineOptions
  - Type: `Object`
  - Default: `{}`
 
-Foo
+Can be used to set various properties on line plots, turn them into Area Charts and so on. Explore in details on the [Trends]() page.
 
 ---
 
@@ -180,20 +189,12 @@ Foo
  - Type: `Boolean`
  - Default: `0`
 
-Foo
-Example
+Makes the chart interactive with arrow keys and highlights the current active data point.
 
-```javascript
-{
-    dropdownButton: '<span class="fa fa-chevron-down"></span>'
-}
-
-```
+---
 
 ### valuesOverPoints
  - Type: `Boolean`
  - Default: `0`
 
-Foo
-
-###
+To display data values over bars or dots in an axis graph.

docs/update_state/navigation.md

@@ -1,23 +1,27 @@
 # Navigation
 
+In order to analyse a data individually, it helps if the chart can activate a given point on the plot. This is where `isNavigable` comes in handy, which makes the chart interactive with arrow keys and highlights the current active data point.
+
+```js
+isNavigable: true // default: false
+```
+
+Try and traverse this chart with arrow-keys.
+
 <project-demo data="2" v-bind:config="{
         type: 'bar',
         height: 140,
 		isNavigable: 1,
-        colors: ['orange'],
+        colors: ['light-blue'],
         axisOptions: { xAxisMode: 'tick' },
         barOptions: { spaceRatio: 0.2 },
     }">
 </project-demo>
 
+Each time a data point is activated, a new `data-select` event is triggered that contains all the label and value information specific to the point This can then be used to reflect in other parts of the webpage.
 
-<project-demo data="2" sideContent="2"
-	v-bind:config="{
-        type: 'bar',
-        height: 140,
-		isNavigable: 1,
-        colors: ['grey'],
-        axisOptions: { xAxisMode: 'tick' },
-        barOptions: { spaceRatio: 0.2 },
-    }">
-</project-demo>
+```js
+chart.parent.addEventListener('data-select', (e) => {
+    update_moon_data(e.index); // e contains index and value of current datapoint
+});
+```