[Excel] (Chart) Add leader lines snippet #992
Conversation
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
There was a problem hiding this comment.
Pull Request Overview
This PR adds a comprehensive sample demonstrating how to work with leader lines for chart data labels in Excel. The sample shows how to enable, disable, and format leader lines, which are visual connectors between data labels and their corresponding chart points.
Key changes:
- Adds a new leader lines snippet with functions to manipulate leader line visibility and formatting
- Updates configuration files to include the new sample in both development and production environments
- Generates corresponding API documentation snippets for the Excel Office.js library
Reviewed Changes
Copilot reviewed 6 out of 7 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| view/excel.json | Adds reference to the leader lines sample for development environment |
| view-prod/excel.json | Adds reference to the leader lines sample for production environment |
| snippet-extractor-output/snippets.yaml | Generates API documentation snippets for leader lines functionality |
| samples/excel/10-chart/chart-leader-lines.yaml | New complete sample demonstrating leader lines manipulation with setup, enable/disable, and formatting functions |
| playlists/excel.yaml | Adds leader lines sample to development playlist |
| playlists-prod/excel.yaml | Adds leader lines sample to production playlist |
| 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; |
There was a problem hiding this comment.
This would be a little more readable.
const point1 = series.points.items[1];
const point2 = series.points.items[2];
point1.dataLabel.top -= 50;
point2.dataLabel.top += 50;| }); | ||
| } | ||
|
|
||
| async function disableLeaderLines() { |
There was a problem hiding this comment.
Consider calling this hideLeaderLines (and throughout). Disable implies the leader lines don't work, which sort of means they are hidden, but it's also a bit ambiguous and doesn't match the UI button.
| }); | ||
| } | ||
|
|
||
| async function enableLeaderLines() { |
There was a problem hiding this comment.
Similar suggestion as previous. Consider using showLeaderLines (or showChartLeaderLines if worried about same names as the property later).
| 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; |
There was a problem hiding this comment.
This would be a little more readable.
const point1 = series.points.items[1];
const point2 = series.points.items[2];
point1.dataLabel.top -= 50;
point2.dataLabel.top += 50;| 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; |
There was a problem hiding this comment.
This would be a little more readable.
const point1 = series.points.items[1];
const point2 = series.points.items[2];
point1.dataLabel.top -= 50;
point2.dataLabel.top += 50;| https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml | ||
|
|
||
|
|
||
| // This function adds data labels to the chart and positions them to |
There was a problem hiding this comment.
| // This function adds data labels to the chart and positions them to | |
| // The following code adds data labels to the chart and positions them to |
| https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml | ||
|
|
||
|
|
||
| // This function changes the format of leader lines. |
There was a problem hiding this comment.
| // This function changes the format of leader lines. | |
| // The following code changes the format of leader lines. |
|
|
||
| // This function changes the format of leader lines. | ||
|
|
||
| // It adjusts color, weight, and line style. |
There was a problem hiding this comment.
Maybe combine this with previous comment.
| // It adjusts color, weight, and line style. | |
| // The following code adjusts color, weight, and line style. |
| https://raw.githubusercontent.com/OfficeDev/office-js-snippets/prod/samples/excel/10-chart/chart-leader-lines.yaml | ||
|
|
||
|
|
||
| // This function changes the format of leader lines. |
There was a problem hiding this comment.
| // This function changes the format of leader lines. | |
| // The following code changes the format of leader lines. |
|
|
||
| // This function changes the format of leader lines. | ||
|
|
||
| // It adjusts color, weight, and line style. |
There was a problem hiding this comment.
Maybe combine this comment with previous.
This PR adds a sample showing how to adjust leader lines for chart data labels.