diff --git a/docs/_sidebar.md b/docs/_sidebar.md
index 65e84be..34d8947 100644
--- a/docs/_sidebar.md
+++ b/docs/_sidebar.md
@@ -4,14 +4,14 @@
* Axis charts
* [A basic chart](basic/basic_chart.md)
* [Trends and Region Charts](basic/trends_regions.md)
- * [Adding more datasets](basic/multiple_datasets.md)
+ * [Annotations and Tooltip format](basic/annotations.md)
+ * [Stacked and Mixed Charts](basic/stacked_and_mixed.md)
* Aggregation Charts
- * [Aka Sliced Diagrams](basic/aggr_sliced_diags.md)
+ * [Pies and Percentages](basic/aggr_sliced_diags.md)
-* Update data
- * [Single Points]()
- * [Entire Data]()
+* Update state
+ * [Modify data](update_data/modify_data.md)
* Events
* [Navigation]()
diff --git a/docs/basic/annotations.md b/docs/basic/annotations.md
new file mode 100644
index 0000000..edd654f
--- /dev/null
+++ b/docs/basic/annotations.md
@@ -0,0 +1,44 @@
+Annotations are for special values (like range points). They are defined within the `data` property itself.
+
+## Markers
+
+To highlight certain values on the Y axis, `yMarkers` can be set. They will shown ad dotted lines on the graph.
+
+```js
+data = {
+ // labels: [],
+ // datasets: [],
+ yMarkers: [
+ {
+ label: "Marker",
+ value: 43,
+ options: { labelPos: 'right' }
+ }
+ ]
+}
+```
+
+[demo only marker]
+
+## Regions
+
+2D counterparts to markers, they have a `start` and `end` instead of value:
+
+```js
+yRegions: [
+ {
+ label: "Region",
+ start: -10,
+ end: 50,
+ options: { labelPos: 'left' }
+ },
+],
+```
+Shown as a a greyed out area between the extremes.
+
+[demo only region]
+
+## Tooltips
+
+Tooltips are by default
+[demo format]
diff --git a/docs/basic/basic_chart.md b/docs/basic/basic_chart.md
index 4d6c92a..144c50e 100644
--- a/docs/basic/basic_chart.md
+++ b/docs/basic/basic_chart.md
@@ -10,7 +10,7 @@ data = {
}
```
-Plug that in with a type `bar`, a color and height,
+Rendering it doesn't require much more that that. Plug the data in with a [type]() `bar`, with an optional [color]() and [height]():
```js
new frappe.Chart( "#chart", {
@@ -22,34 +22,54 @@ new frappe.Chart( "#chart", {
```
-And similarly, a `line` chart:
+And similarly, a `line` chart is data-wise homomorphic to a bar chart:
```js
type:'line'
```
-## Tweaks
+## Adding more datasets
-Axes lines are configurable. By default they are long `span`ning lines, but can also be short `tick`s:`
+A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
```js
-axisOptions: {
- xAxisMode: 'tick' // default: 'span'
-},
+data: {
+ labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ datasets: [
+ { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+ { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+ ]
+}
```
-
+
+
+## Responsiveness
-The bar width can be set by defining the ratio of the space between bars to the bar width.
+Frappe Charts are responsive, as they rerender all the data in the current available container width. To demonstrate, let's take the example of setting the [bar width]() for bar charts.
+
+In order to set the bar width, instead of defining it and the space between the bars independently, we simply define the ratio of the space between bars to the bar width. The chart then adjusts the actual size proportional to the chart container.
```js
barOptions: {
spaceRatio: 0.2 // default: 1
},
```
+Try resizing the window to see the effect, with different ratio values.
-So can the dot size on a line graph, with the `dotSize` property in `lineOptions`.
+## More Tweaks
+
+Axis lines define a chart presentation. By default they are long `span`ning lines, but to give prominence to data points, X and/or Y axes can also be short `tick`s:
+
+```js
+axisOptions: {
+ xAxisMode: 'tick' // default: 'span'
+},
+```
+
+
+Just like bar width, we can set the dot size on a line graph, with the [`dotSize`]() property in [`lineOptions`]().
```js
lineOptions: {
@@ -58,4 +78,4 @@ lineOptions: {
```
-Next up, we'll discover how multiple datasets can behave in different charts.
+These were some of the basic toggles to a chart; there are quite a few line options to go with, particularly to create [regions](). We'll look at those in next section.
diff --git a/docs/basic/heatmap.md b/docs/basic/heatmap.md
index 8dcfbc8..7cf6242 100644
--- a/docs/basic/heatmap.md
+++ b/docs/basic/heatmap.md
@@ -1 +1,26 @@
-## Day-based Month-wise data
\ No newline at end of file
+## Day-based Month-wise data
+
+The heatmap is a representation of day-wise data (similar to [the GitHub Contribution Graph]()). It spaces out data values linearly, across 5 levels (zero data kept exclusive).
+
+In this case, the data has three parts,
+
+```js
+let heatmapData = {
+ dataPoints: {
+ "1426744959": 20,
+ "1463673055": 113,
+ "1476892421": 57,
+ // ...
+ },
+ start: startDate, // a JS date object
+ end: endDate
+}
+```
+(We are working on making the start date and end date implicit and optional). [tip]
+
+The chart is rendered by the type `heatmap`:
+
+```js
+
+```
+
diff --git a/docs/basic/multiple_datasets.md b/docs/basic/multiple_datasets.md
deleted file mode 100644
index f90a0b8..0000000
--- a/docs/basic/multiple_datasets.md
+++ /dev/null
@@ -1,18 +0,0 @@
-## Multiple datasets
-
-A chart can have multiple datasets. In an axis chart, every dataset is represented individually.
-
-```js
-data: {
- labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
- datasets: [
- { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
- { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
- ]
-}
-```
-
-
-All the `lineOptions` and `barOptions` apply to mutliple datasets as well.
-
-In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.
diff --git a/docs/basic/stacked_and_mixed.md b/docs/basic/stacked_and_mixed.md
new file mode 100644
index 0000000..7051b6e
--- /dev/null
+++ b/docs/basic/stacked_and_mixed.md
@@ -0,0 +1,47 @@
+## Adding more datasets
+
+As we have seen, chart can have [multiple datasets](). In an axis chart, every dataset is represented individually.
+
+```js
+data: {
+ labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ datasets: [
+ { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+ { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+ ]
+}
+```
+
+
+## Stacked Bar Chart
+
+Bars have two ways to show multiple data point values. The property [`stacked`]() in `barOptions` renders a stacked bar chart instead of the default adjacent bars:
+
+```js
+barOptions: {
+ stacked: 1 // default 0
+}
+```
+
+[stacked/adjacent]
+
+
+## Mixed Bar/Line Chart
+Each dataset can also have a different `chartType`, which if specified, will take precedence over the `type` property.
+
+```js
+data: {
+ labels: ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
+ datasets: [
+ { name: "Dataset 1", values: [18, 40, 30, 35, 8, 52, 17, -4] },
+ { name: "Dataset 2", values: [30, 50, -10, 15, 18, 32, 27, 14] }
+ ]
+}
+```
+
+
+All the `lineOptions` and `barOptions` apply to mix and match datasets as well.
+
+[mix and match demo, no buttons]
+
+In [Aggregation Charts]() however, instead of being rendered individually, each data point in aggregated accross every dataset. We'll cover those next.
diff --git a/docs/basic/trends_regions.md b/docs/basic/trends_regions.md
index e62ee44..492394a 100644
--- a/docs/basic/trends_regions.md
+++ b/docs/basic/trends_regions.md
@@ -1,11 +1,67 @@
-`lineOptions` have a bunch of other properties too. Region charts are ...
+## Plotting Trends
+Line charts a great to show trends data. Given that such data usually involves a large number of data points. Changing some properties of a default line chart can reduce clutter.
+The X axis is a continuous (usually time) axis.
+
+
+## Data points
+For a homomorphic to plot
+
+Or you could just choose to show only the dots instead
+
+
+
+## Region Chart
+
+Or a more subtle way to show gradation of values.
+
+
+
+
+## Combinations
```js
lineOptions: {
dotSize: 8 // default: 4
},
```
+Here's a demo using different combinations of the line options.
+
-Next up, we'll see how multiple datasets play out in charts.
+Next up, we'll play around with more than one datasets play out in charts.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/getting_started/quick_start.md b/docs/getting_started/quick_start.md
index 1848fec..92393a0 100644
--- a/docs/getting_started/quick_start.md
+++ b/docs/getting_started/quick_start.md
@@ -45,3 +45,6 @@ const chart = new frappe.Chart("#chart", { // or a DOM element,
colors: ['#7cd6fd', '#743ee2']
})
```
+
+## Demo
+Here's a demo to try out yourself:
diff --git a/docs/update_data/modify_data.md b/docs/update_data/modify_data.md
new file mode 100644
index 0000000..e69de29