From 56bfb380cc85c8789e44e051f486c4e7bccee759 Mon Sep 17 00:00:00 2001
From: Julio Lozovei <jlozovei@gmail.com>
Date: Wed, 17 Jan 2024 14:12:31 -0300
Subject: [PATCH] docs: add stack labels example

---
 docs/samples/advanced/custom-labels.md | 185 ++++++++++++++++++++-----
 1 file changed, 147 insertions(+), 38 deletions(-)

diff --git a/docs/samples/advanced/custom-labels.md b/docs/samples/advanced/custom-labels.md
index e87ade1..9ba6bca 100644
--- a/docs/samples/advanced/custom-labels.md
+++ b/docs/samples/advanced/custom-labels.md
@@ -4,16 +4,7 @@ Displays the data labels instead of the data values, using a [custom formatter](
 
 ```js chart-editor
 // <block:setup:2>
-var labels = [
-  'Mercury',
-  'Venus',
-  'Earth',
-  'Mars',
-  'Jupiter',
-  'Saturn',
-  'Uranus',
-  'Neptune',
-];
+var labels = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune'];
 
 var DATA_COUNT = labels.length;
 
@@ -24,74 +15,192 @@ var config = /* <block:config:0> */ {
   type: 'bar',
   data: {
     labels: labels,
-    datasets: [{
-      backgroundColor: Utils.colors(0),
-      data: Utils.numbers({
-        count: DATA_COUNT,
-        min: 0,
-        max: 100
-      })
-    }]
+    datasets: [
+      {
+        backgroundColor: Utils.colors(0),
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          min: 0,
+          max: 100,
+        }),
+      },
+    ],
   },
   options: {
     plugins: {
       datalabels: {
         align: 'end',
         anchor: 'end',
-        color: function(context) {
+        color: function (context) {
           return context.dataset.backgroundColor;
         },
-        font: function(context) {
+        font: function (context) {
           var w = context.chart.width;
           return {
             size: w < 512 ? 12 : 14,
             weight: 'bold',
           };
         },
-        formatter: function(value, context) {
+        formatter: function (value, context) {
           return context.chart.data.labels[context.dataIndex];
-        }
-      }
+        },
+      },
     },
 
     // Core options
     aspectRatio: 5 / 3,
     layout: {
       padding: {
-        top: 32
-      }
+        top: 32,
+      },
     },
     elements: {
       line: {
         fill: false,
-        tension: 0.4
-      }
+        tension: 0.4,
+      },
     },
     scales: {
       x: {
         display: false,
-        offset: true
+        offset: true,
       },
       y: {
-        beginAtZero: true
-      }
-    }
-  }
-} /* </block:config> */;
+        beginAtZero: true,
+      },
+    },
+  },
+}; /* </block:config> */
 
 var actions = [
   {
     name: 'Randomize',
-    handler: function(chart) {
-      chart.data.datasets.forEach(function(dataset, i) {
-        dataset.data = dataset.data.map(function(value) {
+    handler: function (chart) {
+      chart.data.datasets.forEach(function (dataset, i) {
+        dataset.data = dataset.data.map(function (value) {
           return Utils.rand(0, 100);
         });
       });
 
       chart.update();
-    }
-  }
+    },
+  },
+];
+
+module.exports = {
+  actions: actions,
+  config: config,
+};
+```
+
+## Stack Labels
+
+Displays the data _stack_ labels instead of the data values, using a [custom formatter](../../guide/formatting.md#custom-labels).
+
+```js chart-editor
+// <block:setup:2>
+var labels = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug'];
+
+var DATA_COUNT = labels.length;
+
+Utils.srand(0);
+// </block:setup>
+
+var config = /* <block:config:0> */ {
+  type: 'bar',
+  data: {
+    labels: labels,
+    datasets: [
+      {
+        label: 'Sunny days',
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          min: 0,
+          max: 10,
+        }),
+        stack: '🥵',
+      },
+      {
+        label: 'Rainy days',
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          min: 0,
+          max: 10,
+        }),
+        stack: '🥵',
+      },
+      {
+        label: 'Snowy days',
+        data: Utils.numbers({
+          count: DATA_COUNT,
+          min: 0,
+          max: 10,
+        }),
+        stack: '🥶',
+      },
+    ],
+  },
+  options: {
+    plugins: {
+      datalabels: {
+        align: 'end',
+        anchor: 'end',
+        color: function (context) {
+          return context.dataset.backgroundColor;
+        },
+        formatter: function (value, context) {
+          var datasets = context.chart.data.datasets;
+          var stacksCount = Object.keys(context.chart._stacks).length;
+
+          if (context.datasetIndex > datasets.length - 1 - stacksCount) {
+            return datasets[context.datasetIndex].stack;
+          } else {
+            return '';
+          }
+        },
+      },
+    },
+
+    // Core options
+    aspectRatio: 5 / 3,
+    layout: {
+      padding: {
+        top: 32,
+      },
+    },
+    elements: {
+      line: {
+        fill: false,
+        tension: 0.4,
+      },
+    },
+    scales: {
+      x: {
+        display: false,
+        offset: true,
+        stacked: true,
+      },
+      y: {
+        beginAtZero: true,
+        stacked: true,
+      },
+    },
+  },
+}; /* </block:config> */
+
+var actions = [
+  {
+    name: 'Randomize',
+    handler: function (chart) {
+      chart.data.datasets.forEach(function (dataset, i) {
+        dataset.data = dataset.data.map(function (value) {
+          return Utils.rand(0, 100);
+        });
+      });
+
+      chart.update();
+    },
+  },
 ];
 
 module.exports = {