diff --git a/.gitignore b/.gitignore
index a133b939..2d2f29ea 100644
--- a/.gitignore
+++ b/.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/**
\ No newline at end of file
+# playlists/**
+
+package-lock.json
\ No newline at end of file
diff --git a/samples/excel/10-chart/chart-leader-lines.yaml b/samples/excel/10-chart/chart-leader-lines.yaml
new file mode 100644
index 00000000..6baedd74
--- /dev/null
+++ b/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: |-
+
+ This sample shows how to add leader lines for data labels on your charts.
+
+
+ Set up
+
+
+
+ Try it out
+
+
+
+
+
+
+
+
+
+
+
+ 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/office-ui-fabric-core@11.1.0/dist/css/fabric.min.css
+ https://unpkg.com/office-ui-fabric-js@1.5.0/dist/css/fabric.components.min.css
\ No newline at end of file