Skip to content

Commit 8d00602

Browse files
alison-mkAlexJerabek
alison-mk
and
AlexJerabek
authored
[Excel] (Chart) Add chart data labels snippet (#990)
* [Excel] Add chart, data types, and shape snippets * Active shape: Remove jQuery, adjust HTML * Switch from jQuery to JS, reformat html sections * Match sample to naming conventions of repo, align to style guide, reorder methods to follow logical order * Run yarn start, move other snippets to new branches * Re-run yarn start * [Excel] (Shape) Add get active shape image snippet * Remove unrelated snippet * Incorporate Copilot reviewer feedback * Incorporate Copilot feedback * Re-run yarn start * Apply suggestions from code review Co-authored-by: Alex Jerabek <[email protected]> * Code review feedback, re-run yarn start --------- Co-authored-by: Alex Jerabek <[email protected]>
1 parent f2d08d4 commit 8d00602

File tree

9 files changed

+563
-88
lines changed

9 files changed

+563
-88
lines changed

‎.gitignore

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,6 @@ npm-debug.log*
6464
~$*
6565

6666
# Used to ignore "playlists", but having those checked-in for diffing purposes is very useful, so undoing the ignore:
67-
# playlists/**
67+
# playlists/**
68+
69+
package-lock.json

‎playlists-prod/excel.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,15 @@
168168
group: Chart
169169
api_set:
170170
ExcelApi: '1.7'
171+
- id: excel-chart-data-labels
172+
name: Data labels
173+
fileName: chart-data-labels.yaml
174+
description: Add and style data labels for your charts.
175+
rawUrl: >-
176+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-data-labels.yaml
177+
group: Chart
178+
api_set:
179+
ExcelApi: '1.19'
171180
- id: excel-comment-basics
172181
name: Comment basics
173182
fileName: comment-basics.yaml

‎playlists/excel.yaml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,15 @@
168168
group: Chart
169169
api_set:
170170
ExcelApi: '1.7'
171+
- id: excel-chart-data-labels
172+
name: Data labels
173+
fileName: chart-data-labels.yaml
174+
description: Add and style data labels for your charts.
175+
rawUrl: >-
176+
https://raw.githubusercontent.com/OfficeDev/office-js-snippets/main/samples/excel/10-chart/chart-data-labels.yaml
177+
group: Chart
178+
api_set:
179+
ExcelApi: '1.19'
171180
- id: excel-comment-basics
172181
name: Comment basics
173182
fileName: comment-basics.yaml

‎samples/excel/10-chart/chart-data-labels.yaml

Lines changed: 278 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,278 @@
1+
order: 16
2+
id: excel-chart-data-labels
3+
name: Data labels
4+
description: Add and style data labels for your charts.
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("style-data-label-substrings").addEventListener("click", () => tryCatch(styleDataLabelSubstrings));
13+
document.getElementById("change-label-to-round-rectangle").addEventListener("click", () => tryCatch(changeLabelShapesToRoundRectangle));
14+
document.getElementById("change-label-to-assorted").addEventListener("click", () => tryCatch(changeLabelShapesToAssorted));
15+
16+
// Define the worksheet name for the sample.
17+
const sheetName = "Sample";
18+
19+
async function addDataLabels() {
20+
// This function adds data labels to specific chart points
21+
// and sets their text and position.
22+
await Excel.run(async (context) => {
23+
const sheet = context.workbook.worksheets.getItem(sheetName);
24+
const chart = sheet.charts.getItemAt(0);
25+
await context.sync();
26+
27+
const series = chart.series.getItemAt(0);
28+
series.points.load("dataLabel");
29+
await context.sync();
30+
31+
// Define properties for data label positioning and shape.
32+
const labelProperties = [
33+
{
34+
top: 70,
35+
geometricShapeType: Excel.GeometricShapeType.rectangle
36+
},
37+
{
38+
top: 200,
39+
geometricShapeType: Excel.GeometricShapeType.rectangle
40+
}
41+
];
42+
43+
// Add data labels to specific chart points and set their text and properties.
44+
for (let i = 0; i < dataLabelInfo.length; i++) {
45+
const point = series.points.getItemAt(dataLabelInfo[i].index);
46+
point.hasDataLabel = true;
47+
48+
const dataLabel = point.dataLabel;
49+
dataLabel.text = dataLabelInfo[i].news;
50+
dataLabel.set(labelProperties[i]);
51+
}
52+
await context.sync();
53+
});
54+
}
55+
56+
async function styleDataLabelSubstrings() {
57+
// This function styles substrings within data label text using font formatting.
58+
await Excel.run(async (context) => {
59+
const sheet = context.workbook.worksheets.getItem(sheetName);
60+
const chart = sheet.charts.getItemAt(0);
61+
await context.sync();
62+
63+
const series = chart.series.getItemAt(0);
64+
series.load("points");
65+
await context.sync();
66+
67+
series.points.load("items");
68+
await context.sync();
69+
70+
// Style a substring in the first data label.
71+
let searchString = "sports";
72+
let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel.load("text");
73+
await context.sync();
74+
let substringStart = dataLabel.text.indexOf(searchString);
75+
let subLabel = dataLabel.getSubstring(substringStart, searchString.length);
76+
subLabel.font.size = 13;
77+
subLabel.font.bold = true;
78+
79+
// Style a substring in the second data label.
80+
searchString = "'Titanic'";
81+
dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel.load("text");
82+
await context.sync();
83+
84+
substringStart = dataLabel.text.indexOf(searchString);
85+
subLabel = dataLabel.getSubstring(substringStart, searchString.length);
86+
subLabel.font.name = "Calibri";
87+
subLabel.font.size = 13;
88+
subLabel.font.italic = true;
89+
subLabel.font.color = "blue";
90+
await context.sync();
91+
});
92+
}
93+
94+
async function changeLabelShapesToRoundRectangle() {
95+
// This function changes the geometric shape of data labels to round rectangles.
96+
await Excel.run(async (context) => {
97+
const sheet = context.workbook.worksheets.getItem(sheetName);
98+
const chart = sheet.charts.getItemAt(0);
99+
await context.sync();
100+
101+
const series = chart.series.getItemAt(0);
102+
series.load("*");
103+
await context.sync();
104+
105+
series.points.load("*");
106+
await context.sync();
107+
108+
// Set both data labels to round rectangle shape.
109+
let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel;
110+
dataLabel.geometricShapeType = Excel.GeometricShapeType.roundRectangle;
111+
112+
dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel;
113+
dataLabel.geometricShapeType = Excel.GeometricShapeType.roundRectangle;
114+
await context.sync();
115+
});
116+
}
117+
118+
async function changeLabelShapesToAssorted() {
119+
// This function changes data labels to different geometric shapes with custom formatting.
120+
await Excel.run(async (context) => {
121+
const sheet = context.workbook.worksheets.getItem(sheetName);
122+
const chart = sheet.charts.getItemAt(0);
123+
await context.sync();
124+
125+
const series = chart.series.getItemAt(0);
126+
127+
// Set first data label to snip1Rectangle shape.
128+
let dataLabel = series.points.getItemAt(dataLabelInfo[0].index).dataLabel;
129+
dataLabel.geometricShapeType = Excel.GeometricShapeType.snip1Rectangle;
130+
131+
// Set second data label to snip2DiagonalRectangle shape with light green fill.
132+
dataLabel = series.points.getItemAt(dataLabelInfo[1].index).dataLabel;
133+
dataLabel.geometricShapeType = Excel.GeometricShapeType.snip2DiagonalRectangle;
134+
dataLabel.format.fill.setSolidColor("90EE90");
135+
await context.sync();
136+
});
137+
}
138+
139+
/** Create sample data and a line chart for the data labels demo. */
140+
async function setup() {
141+
await Excel.run(async (context) => {
142+
context.workbook.worksheets.getItemOrNullObject(sheetName).delete();
143+
const sheet = context.workbook.worksheets.add(sheetName);
144+
145+
// Add sample data to the worksheet.
146+
const dataRange = sheet.getRange("A1:B32");
147+
dataRange.values = sampleData;
148+
149+
sheet.activate();
150+
await context.sync();
151+
152+
// Create a line chart with markers.
153+
const chart = sheet.charts.add(Excel.ChartType.lineMarkers, dataRange);
154+
155+
// Position and format the chart.
156+
chart.setPosition("D4", "Q25");
157+
chart.legend.visible = false;
158+
chart.title.text = "Product price";
159+
chart.title.format.font.size = 20;
160+
chart.axes.valueAxis.minimum = 80;
161+
162+
await context.sync();
163+
});
164+
}
165+
166+
/** Default helper for invoking an action and handling errors. */
167+
async function tryCatch(callback) {
168+
try {
169+
await callback();
170+
} catch (error) {
171+
// Note: In a production add-in, you'd want to notify the user through your add-in's UI.
172+
console.error(error);
173+
}
174+
}
175+
176+
// Save chart data labels as an object for use throughout the sample.
177+
const dataLabelInfo = [
178+
{
179+
index: 11,
180+
date: "7/12/2023",
181+
news: "The city holds a sports event."
182+
},
183+
{
184+
index: 20,
185+
date: "7/21/2023",
186+
news: "The movie 'Titanic' returns to the cinema."
187+
}
188+
];
189+
190+
// Sample data for the chart.
191+
const sampleData = [
192+
["Date", "Price"],
193+
["7/1/2023", 100],
194+
["7/2/2023", 96.71],
195+
["7/3/2023", 103.24],
196+
["7/4/2023", 109.09],
197+
["7/5/2023", 113.68],
198+
["7/6/2023", 118.68],
199+
["7/7/2023", 123.2],
200+
["7/8/2023", 135.05],
201+
["7/9/2023", 138.68],
202+
["7/10/2023", 129.63],
203+
["7/11/2023", 130.85],
204+
["7/12/2023", 135.71],
205+
["7/13/2023", 124.83],
206+
["7/14/2023", 118.94],
207+
["7/15/2023", 119.63],
208+
["7/16/2023", 127.2],
209+
["7/17/2023", 113.98],
210+
["7/18/2023", 110.32],
211+
["7/19/2023", 119.3],
212+
["7/20/2023", 120.36],
213+
["7/21/2023", 111.88],
214+
["7/22/2023", 118.88],
215+
["7/23/2023", 124.37],
216+
["7/24/2023", 119.53],
217+
["7/25/2023", 133.42],
218+
["7/26/2023", 125.67],
219+
["7/27/2023", 135.82],
220+
["7/28/2023", 137.87],
221+
["7/29/2023", 138.9],
222+
["7/30/2023", 139.36],
223+
["7/31/2023", 138.75]
224+
];
225+
language: typescript
226+
template:
227+
content: |-
228+
<section class="ms-Fabric ms-font-m">
229+
<p>This sample shows how to create data labels for charts and adjust the font and appearance of those labels.</p>
230+
</section>
231+
<section class="ms-Fabric setup ms-font-m">
232+
<h3>Set up</h3>
233+
<button id="setup" class="ms-Button">
234+
<span class="ms-Button-label">Add data and create a chart</span>
235+
</button>
236+
</section>
237+
<section class="ms-Fabric samples ms-font-m">
238+
<h3>Add data labels to the chart</h3>
239+
<button id="add-data-labels" class="ms-Button">
240+
<span class="ms-Button-label">Add data labels</span>
241+
</button>
242+
</section>
243+
<section class="ms-Fabric samples ms-font-m">
244+
<h3>Style data labels</h3>
245+
<button id="style-data-label-substrings" class="ms-Button">
246+
<span class="ms-Button-label">Style data label substrings</span>
247+
</button>
248+
</section>
249+
<section class="ms-Fabric samples ms-font-m">
250+
<button id="change-label-to-round-rectangle" class="ms-Button">
251+
<span class="ms-Button-label">Change data label shapes</span>
252+
</button>
253+
</section>
254+
<section class="ms-Fabric samples ms-font-m">
255+
<button id="change-label-to-assorted" class="ms-Button">
256+
<span class="ms-Button-label">Change data label shapes</span>
257+
</button>
258+
</section>
259+
language: html
260+
style:
261+
content: |-
262+
section.samples {
263+
margin-top: 20px;
264+
}
265+
266+
section.samples .ms-Button, section.setup .ms-Button {
267+
display: block;
268+
margin-bottom: 5px;
269+
margin-left: 20px;
270+
min-width: 80px;
271+
}
272+
language: css
273+
libraries: |-
274+
https://appsforoffice.microsoft.com/lib/1/hosted/office.js
275+
https://appsforoffice.microsoft.com/lib/1/hosted/office.d.ts
276+
277+
https://unpkg.com/[email protected]/dist/css/fabric.min.css
278+
https://unpkg.com/[email protected]/dist/css/fabric.components.min.css

‎snippet-extractor-metadata/excel.xlsx

122 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)