Skip to content

Commit 5e7fc44

Browse files
alison-mkalison-mk
authored
[Excel] (Chart) Add leader lines snippet (#992)
* [Excel] (Chart) Add leader lines snippet * Fix minor bug * Adjust comments * Run yarn start * Update excel.xlsx and run yarn start * Incorporate copilot feedback * Code review feedback * run yarn start
1 parent 8e18665 commit 5e7fc44

File tree

7 files changed

+1558
-1180
lines changed

7 files changed

+1558
-1180
lines changed

‎playlists-prod/excel.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,15 @@
177177
group: Chart
178178
api_set:
179179
ExcelApi: '1.19'
180+
- id: excel-chart-leader-lines
181+
name: Leader lines
182+
fileName: chart-leader-lines.yaml
183+
description: Show and hide leader lines for chart labels.
184+
rawUrl: >-
185+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml
186+
group: Chart
187+
api_set:
188+
ExcelApi: '1.19'
180189
- id: excel-comment-basics
181190
name: Comment basics
182191
fileName: comment-basics.yaml

‎playlists/excel.yaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,15 @@
177177
group: Chart
178178
api_set:
179179
ExcelApi: '1.19'
180+
- id: excel-chart-leader-lines
181+
name: Leader lines
182+
fileName: chart-leader-lines.yaml
183+
description: Show and hide leader lines for chart labels.
184+
rawUrl: >-
185+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-leader-lines.yaml
186+
group: Chart
187+
api_set:
188+
ExcelApi: '1.19'
180189
- id: excel-comment-basics
181190
name: Comment basics
182191
fileName: comment-basics.yaml

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

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
order: 17
2+
id: excel-chart-leader-lines
3+
name: Leader lines
4+
description: Show and hide leader lines for chart labels.
5+
host: EXCEL
6+
api_set:
7+
ExcelApi: '1.19'
8+
script:
9+
content: |-
10+
document.getElementById("setup").addEventListener("click", () => tryCatch(setup));
11+
document.getElementById("add-data-labels").addEventListener("click", () => tryCatch(addDataLabels));
12+
document.getElementById("hide-chart-leader-lines").addEventListener("click", () => tryCatch(hideChartLeaderLines));
13+
document.getElementById("show-chart-leader-lines").addEventListener("click", () => tryCatch(showChartLeaderLines));
14+
document.getElementById("change-leader-line-format").addEventListener("click", () => tryCatch(changeLeaderLineFormat));
15+
16+
const sheetName = "Sample";
17+
18+
async function addDataLabels() {
19+
// The following code adds data labels to the chart and positions them to demonstrate leader lines.
20+
await Excel.run(async (context) => {
21+
const sheet = context.workbook.worksheets.getItem(sheetName);
22+
const chart = sheet.charts.getItemAt(0);
23+
const series = chart.series.getItemAt(0);
24+
25+
// Enable data labels for the series. Leader lines are enabled by default.
26+
series.hasDataLabels = true;
27+
series.points.load("items");
28+
await context.sync();
29+
30+
// Load the top position for each data label.
31+
series.points.items.forEach((point) => point.dataLabel.load("top"));
32+
await context.sync();
33+
34+
// Move some data labels to create distance from their chart points.
35+
const point1 = series.points.items[1];
36+
const point2 = series.points.items[2];
37+
point1.dataLabel.top -= 50;
38+
point2.dataLabel.top += 50;
39+
40+
// Format the data labels.
41+
series.dataLabels.geometricShapeType = Excel.GeometricShapeType.rectangle;
42+
series.dataLabels.showCategoryName = true;
43+
series.dataLabels.format.border.weight = 1;
44+
45+
await context.sync();
46+
});
47+
}
48+
49+
async function hideChartLeaderLines() {
50+
// The following code disables leader lines for chart data labels.
51+
await Excel.run(async (context) => {
52+
const sheet = context.workbook.worksheets.getItem(sheetName);
53+
const chart = sheet.charts.getItemAt(0);
54+
const series = chart.series.getItemAt(0);
55+
const dataLabels = series.dataLabels;
56+
57+
// Disable leader lines.
58+
dataLabels.showLeaderLines = false;
59+
60+
await context.sync();
61+
});
62+
}
63+
64+
async function showChartLeaderLines() {
65+
// The following code enables leader lines for chart data labels.
66+
await Excel.run(async (context) => {
67+
const sheet = context.workbook.worksheets.getItem(sheetName);
68+
const chart = sheet.charts.getItemAt(0);
69+
const series = chart.series.getItemAt(0);
70+
const dataLabels = series.dataLabels;
71+
72+
// Enable leader lines.
73+
dataLabels.showLeaderLines = true;
74+
75+
await context.sync();
76+
});
77+
}
78+
79+
async function changeLeaderLineFormat() {
80+
// The following code changes the format of leader lines. It adjusts color, weight, and line style.
81+
await Excel.run(async (context) => {
82+
const sheet = context.workbook.worksheets.getItem(sheetName);
83+
const chart = sheet.charts.getItemAt(0);
84+
const series = chart.series.getItemAt(0);
85+
const dataLabels = series.dataLabels;
86+
const lineFormat = dataLabels.leaderLines.format;
87+
88+
// Set leader line formatting properties.
89+
lineFormat.line.color = "blue";
90+
lineFormat.line.weight = 2;
91+
lineFormat.line.lineStyle = Excel.ChartLineStyle.dot;
92+
93+
await context.sync();
94+
});
95+
}
96+
97+
/** Create sample data and a line chart for the leader lines demo. */
98+
async function setup() {
99+
await Excel.run(async (context) => {
100+
context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
101+
const sheet = context.workbook.worksheets.add(sheetName);
102+
103+
// Add sample data to the worksheet.
104+
const dataRange = sheet.getRange("A1:C4");
105+
dataRange.values = sampleData;
106+
107+
// Create a line chart.
108+
const chart = sheet.charts.add(Excel.ChartType.line, dataRange);
109+
chart.title.text = "Sales Quantity";
110+
111+
sheet.activate();
112+
await context.sync();
113+
});
114+
}
115+
116+
/** Default helper for invoking an action and handling errors. */
117+
async function tryCatch(callback) {
118+
try {
119+
await callback();
120+
} catch (error) {
121+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
122+
console.error(error);
123+
}
124+
}
125+
126+
/** Sample data for the chart. */
127+
const sampleData = [
128+
["Type", "Product A", "Product B"],
129+
["Q1", 15, 20],
130+
["Q2", 22, 15],
131+
["Q3", 33, 47]
132+
];
133+
language: typescript
134+
template:
135+
content: |-
136+
<section class="ms-Fabric ms-font-m">
137+
<p>This sample shows how to add leader lines for data labels on your charts.</p>
138+
</section>
139+
<section class="ms-Fabric setup ms-font-m">
140+
<h3>Set up</h3>
141+
<button id="setup" class="ms-Button">
142+
<span class="ms-Button-label">Create a chart</span>
143+
</button>
144+
</section>
145+
<section class="ms-Fabric samples ms-font-m">
146+
<h3>Try it out</h3>
147+
<button id="add-data-labels" class="ms-Button">
148+
<span class="ms-Button-label">Add data labels</span>
149+
</button>
150+
</section>
151+
<section class="ms-Fabric samples ms-font-m">
152+
<button id="hide-chart-leader-lines" class="ms-Button">
153+
<span class="ms-Button-label">Hide leader lines</span>
154+
</button>
155+
</section>
156+
<section class="ms-Fabric samples ms-font-m">
157+
<button id="show-chart-leader-lines" class="ms-Button">
158+
<span class="ms-Button-label">Show leader lines</span>
159+
</button>
160+
</section>
161+
<section class="ms-Fabric samples ms-font-m">
162+
<button id="change-leader-line-format" class="ms-Button">
163+
<span class="ms-Button-label">Change format of the leader lines</span>
164+
</button>
165+
</section>
166+
language: html
167+
style:
168+
content: |-
169+
section.samples {
170+
margin-top: 20px;
171+
}
172+
173+
section.samples .ms-Button, section.setup .ms-Button {
174+
display: block;
175+
margin-bottom: 5px;
176+
margin-left: 20px;
177+
min-width: 80px;
178+
}
179+
language: css
180+
libraries: |-
181+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
182+
https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
183+
184+
https://unpkg.com/[email protected]/dist/css/fabric.min.css
185+
https://unpkg.com/[email protected]/dist/css/fabric.components.min.css

‎snippet-extractor-metadata/excel.xlsx‎

133 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)