Automatically scale boxes to fit visible area for Org Chart in SharePoint and Microsoft Teams

Note

For the versions earlier than 4.x.x (including on-premises ones), please follow this instruction.

In this tip I will describe how to automatically resize boxes to fit visible area of the web part. If you have many employees in your org chart it could look like this:

As you can see some of the boxes are outside of visible area. I will show how to automatically scale boxes to fit the web part:

Just edit the page and open the configuration wizard by clicking the Configure button at the top right corner of the web part. Switch to Custom JavaScript step and put the code below into the code editor. Then finish the wizard. This script calculates visible area, and resizes org chart until it fits the width of visible area.

api.onInitialLoadingFinished(() => {
  api.showLoadingPanel();

  const $pochContent = $(".poch-content");
  const $rootNodeList = $(".poch-node-list_root");
  const rootNodeList = $rootNodeList[0];
  let currentZoom = api.currentZoom;

  const adjustWidth = () => {
    const realRootNodeListWidth = rootNodeList.scrollWidth * currentZoom;
    const contentWidth = $pochContent.width();

    if (realRootNodeListWidth > contentWidth) {
      currentZoom = currentZoom - 0.1;

      if (currentZoom > 0) {
        api.zoom(currentZoom);
        adjustWidth();
      }
    } else {
      api.dataProvider.getRootItemId((rootId) => {
        api.scrollToBox(rootId);
        api.hideLoadingPanel();
      });
    }
  }

  setTimeout(adjustWidth, 50);
});