update doc for stacked bar

Author: timqian

docs/07-stacked-bar.md

@@ -0,0 +1,50 @@
+---
+title: Stacked bar chart
+---
+
+A stacked bar chart provides a way of showing data values represented as vertical bars
+
+<p class="codepen" data-height="429" data-theme-id="default" data-default-tab="result" data-user="timqian" data-slug-hash="KKwPrEm" style="height: 429px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="chart.xkcd stacked bar">
+  <span>See the Pen <a href="https://codepen.io/timqian/pen/KKwPrEm">
+  chart.xkcd stacked bar</a> by timqian (<a href="https://codepen.io/timqian">@timqian</a>)
+  on <a href="https://codepen.io">CodePen</a>.</span>
+</p>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
+
+## JS part
+
+```js
+new chartXkcd.StackedBar(svg, {
+  title: 'Issues and PR Submissions',
+  xLabel: 'Month',
+  yLabel: 'Count',
+  data: {
+    labels: ['Jan', 'Feb', 'Mar', 'April', 'May'],
+    datasets: [{
+      label: 'Issues',
+      data: [12, 19, 11, 29, 17],
+    }, {
+      label: 'PRs',
+      data: [3, 5, 2, 4, 1],
+    }, {
+      label: 'Merges',
+      data: [2, 3, 0, 1, 1],
+    }],
+  },
+});
+```
+
+## Customize chart by defining options
+
+- `yTickCount`: customize tick numbers you want to see on the y axis
+- `dataColors`: array of colors for different datasets
+- `fontFamily`: customize font family used in the chart
+- `unxkcdify`: disable xkcd effect (default `false`)
+- `strokeColor`: stroke colors (default `black`)
+- `backgroundColor`: color for BG (default `white`)
+- `legendPosition`: specify where you want to place the legend (default `chartXkcd.config.positionType.upLeft`)
+  Possible values:
+    - up left: `chartXkcd.config.positionType.upLeft`
+    - up right: `chartXkcd.config.positionType.upLeft`
+    - bottom left: `chartXkcd.config.positionType.downLeft`
+    - bottom right: `chartXkcd.config.positionType.downRight`

docs/07-pie.md docs/08-pie.md

@@ -1,6 +1,6 @@
 {
   "name": "chart.xkcd",
-  "version": "1.1.11",
+  "version": "1.1.12",
   "description": "xkcd style chart lib",
   "jsdelivr": "dist/chart.xkcd.min.js",
   "unpkg": "dist/chart.xkcd.min.js",

docs/08-radar.md docs/09-radar.md

@@ -75,7 +75,7 @@ class Radar {
       items: [],
       position: { x: 0, y: 0, type: config.positionType.downRight },
       unxkcdify: this.options.unxkcdify,
-      strokeColor: 'this.options.strokeColor',
+      strokeColor: this.options.strokeColor,
       backgroundColor: this.options.backgroundColor,
     });
 

package.json

@@ -100,24 +100,6 @@ class StackedBar {
       .domain([0, Math.max(...allCols)])
       .range([this.height, 0]);
 
-    // Merge all the lists into a single list, and store the
-    // offests in a corresponding list.  Use dataLength to
-    // track how many total columns there should be.
-    const mergedData = this.data.datasets
-      .reduce((pre, cur) => pre.concat(cur.data), []);
-
-    const dataLength = this.data.datasets[0].data.length;
-
-    const offsets = this.data.datasets
-      .reduce((r, x, i) => {
-        if (i > 0) {
-          r.push(x.data.map((y, j) => this.data.datasets[i - 1].data[j] + r[i - 1][j]));
-        } else {
-          r.push(new Array(x.data.length).fill(0));
-        }
-        return r;
-      }, []).flat();
-
     const graphPart = this.chart.append('g');
 
     // axis
@@ -137,6 +119,24 @@ class StackedBar {
       stroke: this.options.strokeColor,
     });
 
+    // Merge all the lists into a single list, and store the
+    // offests in a corresponding list.  Use dataLength to
+    // track how many total columns there should be.
+    const mergedData = this.data.datasets
+      .reduce((pre, cur) => pre.concat(cur.data), []);
+
+    const dataLength = this.data.datasets[0].data.length;
+
+    const offsets = this.data.datasets
+      .reduce((r, x, i) => {
+        if (i > 0) {
+          r.push(x.data.map((y, j) => this.data.datasets[i - 1].data[j] + r[i - 1][j]));
+        } else {
+          r.push(new Array(x.data.length).fill(0));
+        }
+        return r;
+      }, []).flat();
+
     // Bars
     graphPart.selectAll('.xkcd-chart-stacked-bar')
       .data(mergedData)
@@ -161,7 +161,7 @@ class StackedBar {
 
         const tooltipItems = this.data.datasets.map((dataset, j) => ({
           color: this.options.dataColors[j],
-          text: `${this.data.datasets[j].label || ''}: ${this.data.datasets[j].data[i]}`,
+          text: `${this.data.datasets[j].label || ''}: ${this.data.datasets[j].data[i % dataLength]}`,
         })).reverse();
 
         let tooltipPositionType = config.positionType.downRight;
@@ -172,6 +172,7 @@ class StackedBar {
         } else if (tipX < this.width / 2 && tipY > this.height / 2) {
           tooltipPositionType = config.positionType.upRight;
         }
+
         tooltip.update({
           title: this.data.labels[i],
           items: tooltipItems,