How Can i Make arrowhead line with powerpoint office365 javascript api?

Question

안녕하세요!

Hi, I’m building a PowerPoint Web Add-in with Visual Studio 2022 (Office.js). I provide a set of shapes/images so that internal employees can insert consistent templates. Basic shape/image insertion works.

However, I need to draw a line with an arrowhead. I couldn’t find a clear sample in the docs, and the code below only produces a straight line without an arrowhead. Am I missing something, or is there a different API to create an arrow line?

Questions

1. Is there a supported way to create a line with an end arrowhead in PowerPoint via Office.js?

If the properties above are correct, what else should I do to make the arrowhead appear?

If this isn’t supported on the web client yet, is there any workaround (e.g., using a built-in arrow shape) that I should use instead?

Environment

• PowerPoint: office365
• Office.js url: https://appsforoffice.microsoft.com/lib/1/hosted/office.js
• Browser: edge
• Platform: Windows 11
  DevTool : VisualStudio 2022 PowerPoint Web

Thanks in advance!

//Include my souce code
async function insertRightArrow(ev) {

await PowerPoint.run(async (context) => {

const slide = context.presentation.slides.getItemAt(0);

const shapes = slide.shapes;

// 가로선

const arrow = shapes.addLine("Straight", {

left: 100,

top: 100,

width: 200,

height: 0

});

arrow.name = "MyArrow";

// 수평 고정(혹시 기울어지면)

arrow.height = 0;

arrow.rotation = 0;

// 화살표 모양/크기 - 문자열로 지정

arrow.lineFormat.endArrowheadStyle = "Triangle"; // None | Triangle | Stealth | Diamond | Oval

arrow.lineFormat.endArrowheadLength = "Medium"; // Short | Medium | Long

arrow.lineFormat.endArrowheadWidth = "Medium"; // Narrow | Medium | Wide

// (옵션) 두께/색

arrow.lineFormat.weight = 3;

arrow.lineFormat.color = "#000000";

await context.sync();

});

}

Answer 1

Hi 주 진규

Thank you for reaching out to Microsoft Q&A Forum and sharing your experience.

I understand you're building a PowerPoint Web Add-in with Office.js and need to insert a line with an arrowhead, but it's only appearing as a plain straight line.

The PowerPoint JavaScript API (Office.js) fully supports creating lines with arrowheads using ShapeCollection.addLine to add the line, followed by setting properties on the returned Shape.lineFormat object. These properties are part of the PowerPoint JavaScript API requirement set 1.4.

The properties you mentioned (endArrowheadStyle, endArrowheadLength, and endArrowheadWidth) are documented for consistency across Office hosts. Based on your scenario, however, these arrowhead features may not be fully supported in PowerPoint for the web at this time.

• If you're testing in PowerPoint Online and see rendering issues, try switching to the PowerPoint desktop client for development to check if it points to a web-specific issue.
• If arrowhead styling remains essential and doesn't render reliably, consider this workaround: Instead of using addLine(), insert a built-in arrow shape via shapes.addGeometricShape(). Use a preset from PowerPoint.GeometricShapeType (e.g., "rightArrow"), then customize it to mimic a thin line:

const arrowShape = shapes.addGeometricShape("RightArrow", {
      left: 100,
      top: 100,
      width: 200,
      height: 50
  });

For your reference:

• Work with shapes using the PowerPoint JavaScript API - Office Add-ins | Microsoft Learn
• PowerPoint.ShapeCollection class - Office Add-ins | Microsoft Learn
• PowerPoint.GeometricShapeType enum - Office Add-ins | Microsoft Learn

I hope one of these steps gets you back up and running. Please let us know how you get on, as your feedback can help others in the community facing the same problem.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".   

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.