[Excel] (Chart) Add leader lines snippet

.gitignore

@@ -64,4 +64,6 @@ npm-debug.log*
 ~$*
 
 # Used to ignore "playlists", but having those checked-in for diffing purposes is very useful, so undoing the ignore:
-# playlists/**
+# playlists/**
+
+package-lock.json

samples/excel/10-chart/chart-leader-lines.yaml

@@ -0,0 +1,187 @@
+order: 17
+id: excel-chart-leader-lines
+name: Leader lines
+description: Show and hide leader lines for chart labels.
+host: EXCEL
+api_set:
+    ExcelApi: '1.19'
+script:
+    content: |-
+        document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
+        document.getElementById("add-data-labels").addEventListener("click", () => tryCatch(addDataLabels));
+        document.getElementById("enable-leader-lines").addEventListener("click", () => tryCatch(enableLeaderLines));
+        document.getElementById("disable-leader-lines").addEventListener("click", () => tryCatch(disableLeaderLines));
+        document.getElementById("change-leader-line-format").addEventListener("click", () => tryCatch(changeLeaderLineFormat));
+
+        const sheetName = "Sample";
+
+        /** Add data labels to the chart and position them to demonstrate leader lines. */
+        async function addDataLabels() {
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+
+            // Enable data labels for the series.
+            series.hasDataLabels = true;
+            series.points.load("items");
+            await context.sync();
+
+            // Load the top position for each data label.
+            series.points.items.forEach((point) => point.dataLabel.load("top"));
+            await context.sync();
+
+            // Move some data labels to create distance from their chart points.
+            series.points.items[1].dataLabel.top = series.points.items[1].dataLabel.top - 50;
+            series.points.items[2].dataLabel.top = series.points.items[2].dataLabel.top + 50;
+
+            // Format the data labels.
+            series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
+            series.dataLabels.showCategoryName = true;
+            series.dataLabels.format.border.weight = 1;
+
+            await context.sync();
+          });
+        }
+
+        /** Enable leader lines for chart data labels. */
+        async function enableLeaderLines() {
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+
+            // Load the current leader lines setting.
+            dataLabels.load("showLeaderLines");
+            await context.sync();
+
+            // Enable leader lines.
+            dataLabels.showLeaderLines = true;
+
+            await context.sync();
+          });
+        }
+
+        /** Disable leader lines for chart data labels. */
+        async function disableLeaderLines() {
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+
+            // Disable leader lines.
+            dataLabels.showLeaderLines = false;
+
+            await context.sync();
+          });
+        }
+
+        /** Change the format of leader lines including color, weight, and line style. */
+        async function changeLeaderLineFormat() {
+          await Excel.run(async (context) => {
+            const sheet = context.workbook.worksheets.getItem(sheetName);
+            const chart = sheet.charts.getItemAt(0);
+            const series = chart.series.getItemAt(0);
+            const dataLabels = series.dataLabels;
+            const lineFormat = dataLabels.leaderLines.format;
+
+            // Set leader line formatting properties.
+            lineFormat.line.color = "blue";
+            lineFormat.line.weight = 2;
+            lineFormat.line.lineStyle = Excel.ChartLineStyle.dot;
+
+            await context.sync();
+          });
+        }
+
+        /** Create sample data and a line chart for the leader lines demo. */
+        async function setup() {
+          await Excel.run(async (context) => {
+            context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
+            const sheet = context.workbook.worksheets.add(sheetName);
+
+            // Add sample data to the worksheet.
+            const dataRange = sheet.getRange("A1:C4");
+            dataRange.values = sampleData;
+
+            // Create a line chart.
+            const chart = sheet.charts.add(Excel.ChartType.line, dataRange);
+            chart.title.text = "Sales Quantity";
+
+            sheet.activate();
+            await context.sync();
+          });
+        }
+
+        /** Default helper for invoking an action and handling errors. */
+        async function tryCatch(callback) {
+          try {
+            await callback();
+          } catch (error) {
+            // Note: In a production add-in, you'd want to notify the user through your add-in's UI.
+            console.error(error);
+          }
+        }
+
+        /** Sample data for the chart. */
+        const sampleData = [
+          ["Type", "Product A", "Product B"],
+          ["Q1", 15, 20],
+          ["Q2", 22, 15],
+          ["Q3", 33, 47]
+        ];
+    language: typescript
+template:
+    content: |-
+        <section class="ms-Fabric ms-font-m">
+            <p>This sample shows how to add leader lines for data labels on your charts.</p>
+        </section>
+        <section class="ms-Fabric setup ms-font-m">
+            <h3>Set up</h3>
+            <button id="setup" class="ms-Button">
+                <span class="ms-Button-label">Create a chart</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <h3>Try it out</h3>
+            <button id="add-data-labels" class="ms-Button">
+                <span class="ms-Button-label">Add data labels</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="enable-leader-lines" class="ms-Button">
+                <span class="ms-Button-label">Show leader lines</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="disable-leader-lines" class="ms-Button">
+                <span class="ms-Button-label">Hide leader lines</span>
+            </button>
+        </section>
+        <section class="ms-Fabric samples ms-font-m">
+            <button id="change-leader-line-format" class="ms-Button">
+                <span class="ms-Button-label">Change format of the leader lines</span>
+            </button>
+        </section>
+    language: html
+style:
+    content: |-
+        section.samples {
+            margin-top: 20px;
+        }
+
+        section.samples .ms-Button, section.setup .ms-Button {
+            display: block;
+            margin-bottom: 5px;
+            margin-left: 20px;
+            min-width: 80px;
+        }
+    language: css
+libraries: |-
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.js
+    https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
+
+    https://unpkg.com/[email protected]/dist/css/fabric.min.css
+    https://unpkg.com/[email protected]/dist/css/fabric.components.min.css