diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 1b26ae4..f4cceed 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -7,11 +7,11 @@
   * [Tooltips and Annotations](basic/annotations.md)
   * [Stacked and Mixed Charts](basic/stacked_and_mixed.md)
 
-* Aggregation Charts
-  * [Pies and Percentages](basic/aggr_sliced_diags.md)
+* Pies and Percentages
+  * [Aggregation Charts](basic/aggr_sliced_diags.md)
 
 * Update state
-  * [Modify data](update_data/modify_data.md)
+  * [Modify data](update_state/modify_data.md)
 
 * Events
   * [Navigation]()
diff --git a/docs/basic/aggr_sliced_diags.md b/docs/basic/aggr_sliced_diags.md
index 8dedd3d..b38c7ca 100644
--- a/docs/basic/aggr_sliced_diags.md
+++ b/docs/basic/aggr_sliced_diags.md
@@ -1,25 +1,86 @@
-## AKA Sliced Diagrams
+## Also called Sliced Diagrams
 Another family of charts, the aggregation charts accumulate the value at a data point across the multiple datasets.
 
-**The data format stays the same.**
+**The data format stays the same, with single or multi datasets.**
 
-## Pie chart
+#### Pie chart
 Perhaps the most well-known representation of data slices are Pie charts:
 
 ```js
-
+type: 'pie'
 ```
+<chart-demo data="mixed-2" v-bind:config="{
+        type: 'pie',
+        height: 300
+    }">
+</chart-demo>
 
-
-## Percentage Charts FTW
+#### Percentage Charts FTW
 
 Pies have received some [criticism]() for data perception; we are much better at parsing sizes in a single dimension rather than an area. That's why, the much leaner `percentage` chart can come in handy:
 
 ```js
 type: 'percentage'
 ```
+<chart-demo data="mixed-2" v-bind:config="{
+        type: 'percentage',
+        height: 180,
+    }">
+</chart-demo>
 
-## Limiting the slices
-When there are too many to make sense
+#### Limiting the slices
+When there are too many data values to show visually, it makes sense to bundle up the least of the values as a cumulated data point, rather than showing tiny slices. This can be done by defining the maximum number of slices to be shown.
 
-11
+```js
+maxSlices: 7,
+```
+<chart-demo data="mixed-2" v-bind:config="{
+        type: 'pie',
+        height: 300,
+		maxSlices: 7,
+    }"
+    v-bind:options="[
+        {
+            name: 'maxSlices',
+            path: ['maxSlices'],
+            type: 'number',
+            numberOptions: { min: 5, max: 8, step: 1 },
+            activeState: 7
+        }
+    ]">
+</chart-demo>
+
+#### Configuring percentage bars
+Some attributes of a percentage bar can be redefined; like its height and the depth of it's shadow.
+
+```js
+barOptions: {
+	height: 15,          // default: 20
+	depth: 5             // default: 2
+}
+```
+<chart-demo data="mixed-2" v-bind:config="{
+        type: 'percentage',
+        height: 200,
+		barOptions: {
+			height: 15,
+			depth: 5
+		}
+    }"
+    v-bind:options="[
+        {
+            name: 'barOptions',
+            path: ['barOptions', 'depth'],
+            type: 'number',
+            numberOptions: { min: 1, max: 10, step: 1 },
+            activeState: 5
+        },
+        {
+            name: 'barOptions',
+            path: ['barOptions', 'height'],
+            type: 'number',
+            numberOptions: { min: 11, max: 31, step: 2 },
+            activeState: 15
+        }
+    ]">
+</chart-demo>
diff --git a/docs/basic/trends_regions.md b/docs/basic/trends_regions.md
index 2ca64ec..aca1e3a 100644
--- a/docs/basic/trends_regions.md
+++ b/docs/basic/trends_regions.md
@@ -136,7 +136,7 @@ Here's a demo using different combinations of the line options.
     ]">
 </chart-demo>
 
-Next up, we'll play around with more than one datasets play out in charts.
+Next up, we'll start to annotate the data in charts.
 
 
 
diff --git a/docs/data.js b/docs/data.js
index 2ee3fed..f013d0a 100644
--- a/docs/data.js
+++ b/docs/data.js
@@ -39,25 +39,96 @@ const fireballOver25 = [
 	[8, 9, 8, 6, 4, 8, 5, 6, 14, 11, 21, 12]
 ];
 
-const barCompositeData = {
-	labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
-		"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
-	datasets: [
-		{
-			name: "Over 25 reports",
-			values: fireballOver25[9],
-		},
-		{
-			name: "5 to 25 reports",
-			values: fireball_5_25[9],
-		},
-		{
-			name: "2 to 5 reports",
-			values: fireball_2_5[9]
-		}
-	]
+// https://stackoverflow.com/a/29325222
+function getRandomBias(min, max, bias, influence) {
+	const range = max - min;
+	const biasValue = range * bias + min;
+	var rnd = Math.random() * range + min,		// random in range
+		mix = Math.random() * influence;		// random mixer
+	return rnd * (1 - mix) + biasValue * mix;	// mix full range and bias
+}
+
+/**
+ * Shuffles array in place. ES6 version
+ * @param {Array} array An array containing the items.
+ */
+function shuffle(array) {
+	// Awesomeness: https://bost.ocks.org/mike/shuffle/
+	// https://stackoverflow.com/a/2450976/6495043
+	// https://stackoverflow.com/questions/6274339/how-can-i-shuffle-an-array?noredirect=1&lq=1
+
+	for (let i = array.length - 1; i > 0; i--) {
+		let j = Math.floor(Math.random() * (i + 1));
+		[array[i], array[j]] = [array[j], array[i]];
+	}
+
+	return array;
+}
+
+let updateDataAllLabels = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue",
+	"Wed", "Thu", "Fri", "Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri",
+	"Sat", "Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun", "Mon"];
+
+const baseLength = 10;
+const fullLength = 30;
+
+let getRandom = () => Math.floor(getRandomBias(-40, 60, 0.8, 1));
+let updateDataAllValues = Array.from({length: fullLength}, getRandom);
+
+// We're gonna be shuffling this
+let updateDataAllIndices = updateDataAllLabels.map((d,i) => i);
+
+let getUpdateArray = (sourceArray, length=10) => {
+	let indices = updateDataAllIndices.slice(0, length);
+	return indices.map((index) => sourceArray[index]);
 };
 
+let currentLastIndex = baseLength;
+
+function getUpdateData() {
+	shuffle(updateDataAllIndices);
+	let value = getRandom();
+	let start = getRandom();
+	let end = getRandom();
+	currentLastIndex = baseLength;
+
+	return {
+		labels: updateDataAllLabels.slice(0, baseLength),
+		datasets: [{
+			values: getUpdateArray(updateDataAllValues)
+		}],
+		yMarkers: [
+			{
+				label: "Altitude",
+				value: value,
+				type: 'dashed'
+			}
+		],
+		yRegions: [
+			{
+				label: "Range",
+				start: start,
+				end: end
+			},
+		],
+	};
+}
+
+function getAddUpdateData() {
+	if(currentLastIndex >= fullLength) return;
+
+	// TODO: Fix update on removal
+	currentLastIndex++;
+	let c = currentLastIndex -1;
+
+	return [updateDataAllLabels[c], [updateDataAllValues[c]]];
+
+	// updateChart.addDataPoint(
+	// 	updateDataAllLabels[index], [updateDataAllValues[index]]
+	// );
+}
+
+
 const sampleData = {
 	"0": {
 		labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
@@ -174,5 +245,24 @@ const sampleData = {
 		]
 	},
 
-	"bar-composite-data": barCompositeData
+	"bar-composite-data": {
+		labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun",
+			"Jul", "Aug", "Sep", "Oct", "Nov", "Dec"],
+		datasets: [
+			{
+				name: "Over 25 reports",
+				values: fireballOver25[9],
+			},
+			{
+				name: "5 to 25 reports",
+				values: fireball_5_25[9],
+			},
+			{
+				name: "2 to 5 reports",
+				values: fireball_2_5[9]
+			}
+		]
+	},
+
+	"get-update-data": getUpdateData,
 }
diff --git a/docs/demoBuilder.js b/docs/demoBuilder.js
index 8de7786..7fca6a0 100644
--- a/docs/demoBuilder.js
+++ b/docs/demoBuilder.js
@@ -166,7 +166,11 @@ class docSection {
 					value: o.activeState ? o.activeState : 0,
 					// (max - min)/2
 					onInput: (value) => {
-						args[o.path[0]][o.path[1]] = value;
+						if(o.path[1]) {
+							args[o.path[0]][o.path[1]] = value;
+						} else {
+							args[o.path[0]] = value;
+						}
 
 						this.demos[demoIndex] = new this.LIB_OBJ(figure, args);
 					}
diff --git a/docs/index.html b/docs/index.html
index f4f785b..0eed75f 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -92,6 +92,7 @@
   <script>
 
     let dbd = new demoBuilder(frappe.Chart);
+    console.log(sampleData, getAddUpdateData, getUpdateData);
 
     Vue.component('chart-demo', {
       template: '<div class="chart-demo"></div>',
@@ -99,17 +100,28 @@
       mounted: function() {
         let config = this.config;
         config.data = sampleData[this.data];
+        if(typeof sampleData[this.data] === "function") {
+          config.data = sampleData[this.data]();
+        }
+
+        console.log(sampleData, getAddUpdateData, getUpdateData);
         var demoConfig = {
           config: config,
           options: this.options,
-          actions: this.actions
+          actions: this.actions.actions
         };
 
         dbd.makeSection(this.$el, demoConfig);
       }
     });
 
-    new Vue({ el: '#app' });
+    new Vue({
+      el: '#app',
+      data: {
+        getAddUpdateData: getAddUpdateData,
+        getUpdateData: getUpdateData
+      }
+    });
 
     window.$docsify = {
       name: 'frappe-charts',
diff --git a/docs/reference/api.md b/docs/reference/api.md
new file mode 100644
index 0000000..e69de29
diff --git a/docs/reference/configuration.md b/docs/reference/configuration.md
new file mode 100644
index 0000000..227c7c4
--- /dev/null
+++ b/docs/reference/configuration.md
@@ -0,0 +1,226 @@
+---
+sidebarDepth: 2
+---
+
+# Configuration
+
+With all the customizable features of Frappe Charts, this section is dedicated to enabling / disabling existing functionality.
+
+## Container
+
+The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
+
+```javascript
+const datatable = new DataTable('#datatable', options);
+// or
+const container = document.querySelector('#datatable');
+const datatable = new DataTable(container, options);
+```
+
+## Options
+
+The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
+
+```javascript
+const options = {
+    columns: ['Name', 'Position', 'Salary'],
+    data: [
+        ['John Doe', 'DevOps Engineer', '$12300'],
+        ['Mary Jane', 'UX Design', '$14000'],
+    ]
+}
+
+const datatable = new DataTable(container, options);
+```
+
+The following options are configurable:
+
+### getEditor
+ - Type: `Function`
+ - Default: `null`
+
+Customize the editor behaviour.
+
+---
+
+### serialNoColumn
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show serial number as the first column in datatable.
+
+---
+
+### checkboxColumn
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to show checkbox column in the datatable.
+
+---
+
+### clusterize
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to use clusterize to render the data.
+
+> If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the `clusterize.js` lib
+
+---
+
+### layout
+ - Type: `String`
+ - Default: `fixed`
+ - Options: `fixed | fluid | ratio`
+
+This option controls how width of each `column` is calculated in the DataTable.
+
+#### fixed
+
+The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
+
+#### fluid
+
+The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
+
+#### ratio
+
+This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width  will be twice as much as column A.
+
+---
+
+### noDataMessage
+ - Type: `String`
+ - Default: `No Data`
+
+The message shown when there are no rows to show in the DataTable.
+
+---
+
+### dynamicRowHeight
+ - Type: `Boolean`
+ - Default: `false`
+
+The height of the row will be set according to the content of the cell with the maximum height in that row.
+
+---
+
+### cellHeight
+ - Type: `Number`
+ - Default: `null`
+
+Set the height of each cell explicitly.
+
+> If this value is set, `dynamicRowHeight` won't have any effect.
+
+---
+
+### inlineFilters
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to enable the inline filter feature. If the value is `true`, then you can activate the filter row by pressing `Ctrl/Cmd + F` after clicking on any cell in the DataTable.
+
+---
+
+### treeView
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to render rows in a tree structure. For this to work, you must pass the `indent` value for each row.
+
+Example
+```javascript
+
+const data = [
+    {
+        'Department': 'IT Department',
+        'No of People': '10',
+        'indent': 0,
+    },
+    {
+        'Department': 'Javascript Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+    {
+        'Department': 'Vue.js Team',
+        'No of People': '3',
+        'indent': 2,
+    },
+    {
+        'Department': 'React Team',
+        'No of People': '2',
+        'indent': 2,
+    },
+    {
+        'Department': 'Design Team',
+        'No of People': '5',
+        'indent': 1,
+    },
+]
+
+const datatable = new DataTable('#datatable', {
+    columns: ['Department', 'No of People'],
+    data: data
+});
+
+```
+
+---
+
+### checkedRowStatus
+ - Type: `Boolean`
+ - Default: `true`
+
+Whether to show the number of rows checked in a toast message.
+
+---
+
+### pasteFromClipboard
+ - _Experimental_
+ - Type: `Boolean`
+ - Default: `false`
+
+Whether to allow the user to paste copied content into selected cell(s).
+
+---
+
+### dropdownButton
+ - Type: `String`
+ - Default: `▼`
+
+String to render as the dropdown button. You can pass a span with an icon class.
+
+Example
+
+```javascript
+{
+    dropdownButton: '<span class="fa fa-chevron-down"></span>'
+}
+
+```
+
+### headerDropdown
+ - Type: `Array`
+
+When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
+This options allows you to pass an array of custom buttons with custom actions defined by you.
+
+```javascript
+options = {
+    headerDropdown: [
+        {
+            label: 'Copy column contents',
+            action: function (column) {
+                // code to copy the column contents
+            }
+        },
+}
+```
+
+### events
+ - Type: `Object`
+
+ The events options is described in detailed in the [next section](events.md).
diff --git a/docs/update_state/modify_data.md b/docs/update_state/modify_data.md
index 0c105d2..f30a68e 100644
--- a/docs/update_state/modify_data.md
+++ b/docs/update_state/modify_data.md
@@ -1,9 +1,39 @@
 There are two ways to update data in a chart: either in adding and removing individual points, or updating the existing data with an entirely new set of data points.
 
 ## Updating individual data points
-
+<chart-demo data="get-update-data" v-bind:config="{
+        type: 'bar',
+        height: 200
+    }"
+	v-bind:actions="[
+		{
+			name: 'Add Value',
+			fn: 'addDataPoint',
+			args: getAddUpdateData()
+		},
+		{
+			name: 'Remove Value',
+			fn: 'removeDataPoint',
+			args: []
+		}
+	]">
+</chart-demo>
 
 ## Updating full data
 
+<chart-demo data="get-update-data" v-bind:config="{
+        type: 'bar',
+        height: 200
+    }"
+	v-bind:actions="[
+		{
+			name: 'Random Data',
+			fn: 'update',
+			args: [getUpdateData()]
+		}
+	]">
+</chart-demo>
+
+
 [update data with varying lengths]