diff --git a/change/@fluentui-react-charting-5cb11ce8-3dd1-44a0-b5d6-86ab28f4e94c.json b/change/@fluentui-react-charting-5cb11ce8-3dd1-44a0-b5d6-86ab28f4e94c.json
new file mode 100644
index 00000000000000..f87169c6dc8918
--- /dev/null
+++ b/change/@fluentui-react-charting-5cb11ce8-3dd1-44a0-b5d6-86ab28f4e94c.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Fixing Tree chart issues for adding the optional bodyText for parent node and adjusting the allignment of the tree in the screen",
+  "packageName": "@fluentui/react-charting",
+  "email": "ankityadav@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.base.tsx b/packages/react-charting/src/components/TreeChart/TreeChart.base.tsx
index a4aa47ef65756b..211b24fd2d8a32 100644
--- a/packages/react-charting/src/components/TreeChart/TreeChart.base.tsx
+++ b/packages/react-charting/src/components/TreeChart/TreeChart.base.tsx
@@ -20,21 +20,16 @@ const getClassNames = classNamesFunction<ITreeStyleProps, ITreeStyles>();
 // Create a parent class for common tree components
 class StandardTree {
   public treeData: ITreeChartDataPoint;
-  public styleClassNames: {
-    rectmetricText: string | undefined;
-    rectSubText: string | undefined;
-    link: string;
-    rectNode: string;
-    rectText: string;
-  };
-
-  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];
-  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];
+  public styleClassNames: IProcessedStyleSet<ITreeStyles>;
+
+  private _nodeElements: JSX.Element[] = [];
+  private _linkElements: JSX.Element[] = [];
+
   constructor(
     treeData: ITreeChartDataPoint,
-    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },
-    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],
-    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],
+    styleClassNames: IProcessedStyleSet<ITreeStyles>,
+    _nodeElements: JSX.Element[] = [],
+    _linkElements: JSX.Element[] = [],
   ) {
     this.treeData = treeData;
     this.styleClassNames = styleClassNames;
@@ -48,7 +43,7 @@ class StandardTree {
     let word: string = '';
     const tspan = select('.svgTree').append('text').attr('class', 'tempText').append('tspan').text(null);
 
-    if (styleClass !== undefined) {
+    if (styleClass) {
       tspan.attr('class', styleClass);
     }
 
@@ -77,8 +72,9 @@ class StandardTree {
   public addNodeShapetoSVG(
     name: string,
     subname: string | undefined,
+    bodytext: string | undefined,
     metricName: string | undefined,
-    xCoordinate: number,
+    xCenterCoordinate: number,
     yCoordinate: number,
     fillColor: string,
     rectangleWidth: number,
@@ -87,31 +83,37 @@ class StandardTree {
     parentInfo: string,
   ) {
     const ariaLabel = `nodeId: ${nodeId} \nnodeMainText: ${name}\nsubText ${subname} ${parentInfo}`;
-    this._nodeElements.push(
-      <rect
-        width={rectangleWidth}
-        height={rectangleHeight}
-        x={xCoordinate}
-        y={yCoordinate}
-        tabIndex={0}
-        role={'text'}
-        data-is-focusable={true}
-        aria-label={ariaLabel}
-        className={this.styleClassNames.rectNode}
-        stroke={fillColor}
-        key={`${nodeId}${this.styleClassNames.rectNode}`}
-      />,
-    );
+    const xCoordinate = xCenterCoordinate - rectangleWidth / 2;
+    if (metricName || nodeId !== 0 || !bodytext) {
+      this._nodeElements.push(
+        <rect
+          width={rectangleWidth}
+          height={rectangleHeight}
+          x={xCoordinate}
+          y={yCoordinate}
+          tabIndex={0}
+          role={'text'}
+          data-is-focusable={true}
+          aria-label={ariaLabel}
+          className={this.styleClassNames.rectNode}
+          stroke={fillColor}
+          key={`${nodeId}${this.styleClassNames.rectNode}`}
+        />,
+      );
+    }
 
-    if (subname !== undefined) {
+    if (subname) {
       subname = this.truncateText(subname, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectSubText);
     }
-    if (metricName !== undefined) {
+    if (bodytext) {
+      bodytext = this.truncateText(bodytext, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectBodyText);
+    }
+    if (metricName) {
       metricName = this.truncateText(
         metricName,
         rectangleWidth,
         rectangleWidth / 4,
-        this.styleClassNames.rectmetricText,
+        this.styleClassNames.rectMetricText,
       );
     }
     name = this.truncateText(name, rectangleWidth, rectangleWidth / 4, this.styleClassNames.rectText);
@@ -120,22 +122,30 @@ class StandardTree {
     // Text position x = x + rectWidth/2, 2 is ratio for length
     // Sub-text position x = x + rectWidth/2, 2 is ratio for length
 
-    const subValue =
-      metricName !== undefined ? (
-        <tspan className={this.styleClassNames.rectmetricText} dy="1.4em" x={xCoordinate + rectangleWidth / 2}>
-          {metricName}
-        </tspan>
-      ) : (
+    const subValue = metricName ? (
+      <tspan className={this.styleClassNames.rectMetricText} dy="1.4em" x={xCoordinate + rectangleWidth / 2}>
+        {metricName}
+      </tspan>
+    ) : bodytext ? (
+      <>
         <tspan className={this.styleClassNames.rectSubText} dy="1.4em" x={xCoordinate + rectangleWidth / 2}>
           {subname}
         </tspan>
-      );
+        <tspan className={this.styleClassNames.rectBodyText} dy="1.4em" x={xCoordinate + rectangleWidth / 2}>
+          {bodytext}
+        </tspan>
+      </>
+    ) : (
+      <tspan className={this.styleClassNames.rectSubText} dy="1.4em" x={xCoordinate + rectangleWidth / 2}>
+        {subname}
+      </tspan>
+    );
 
-    if (subname === undefined && metricName === undefined) {
+    if (!subname && !metricName && !bodytext) {
       this._nodeElements.push(
         <text
           textAnchor="middle"
-          className={this.styleClassNames.rectmetricText}
+          className={this.styleClassNames.rectMetricText}
           dy={yCoordinate + rectangleHeight / 1.6}
           x={xCoordinate + rectangleWidth / 2}
           key={`${nodeId}${this.styleClassNames.rectText}`}
@@ -147,8 +157,8 @@ class StandardTree {
       this._nodeElements.push(
         <text
           textAnchor="middle"
-          className={metricName !== undefined ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}
-          dy={metricName !== undefined ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}
+          className={metricName ? this.styleClassNames.rectSubText : this.styleClassNames.rectText}
+          dy={metricName ? yCoordinate + rectangleHeight / 2.5 : yCoordinate + rectangleHeight / 2}
           x={xCoordinate + rectangleWidth / 2}
           key={`${nodeId}${this.styleClassNames.rectText}`}
         >
@@ -172,12 +182,25 @@ class StandardTree {
   ): string {
     // gap adds ratio for parent.y to child.y
 
-    const path = `M${childX},${childY - gap} H${childXMax + rectWidth} M${parentX + rectWidth / 2},${childY - gap}
+    /*Below code is used to draw lines(___|) to show the parent child relation i.e a vertical line
+      emerging from the parent and
+      then a horzontal line encompassing all the its children which are
+      shown below it .so it gives a visual representation of tree branches.
+
+      So for making this path firstly we are moving to the childX which is the mid point of the node and then
+      we are subtracting the half of rectwidth to move the complete width of the rectangle and
+      we are subtracting gap from y cordinate as we are making this line at a little gap from node.
+      Then we are building that line horizonatlly till childXmax, again adding half rectwidth to complete
+      the line till end as childXmax will be midpoint.
+      Then last part is for making line vertical for that we move to the parentx position and
+      then draw the vertical till parenty + rectHeight + gap/2
+      We have seperate path for leaf node as we are using different composition like compact, long etc.*/
+
+    const path = `M${childX - rectWidth / 2},${childY - gap} H${childXMax + rectWidth / 2} M${parentX},${childY - gap}
     V${parentY + rectHeight + gap / 2}`;
 
-    const leafpath = `M${parentX + rectWidth / 2},${parentY + rectHeight + gap / 2} V${
-      parentY + gap * 5
-    } H${parentX} H${parentX + rectWidth}`;
+    const leafpath = `M${parentX},${parentY + rectHeight + gap / 2} V${parentY + gap * 5}
+    H${parentX - rectWidth / 2} H${parentX + rectWidth / 2}`;
 
     // based on the type of node return leafpath or path element
     return leaf ? leafpath : path;
@@ -213,9 +236,9 @@ class LayeredTree extends StandardTree {
   constructor(
     treeData: ITreeChartDataPoint,
     composition: number | undefined,
-    styleClassNames: { link: string; rectNode: string; rectText: string; rectSubText: string; rectmetricText: string },
-    _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [],
-    _linkElements: Array<React.SVGProps<SVGPathElement>> = [],
+    styleClassNames: IProcessedStyleSet<ITreeStyles>,
+    _nodeElements: JSX.Element[] = [],
+    _linkElements: JSX.Element[] = [],
     _treeTraversal: number | undefined,
   ) {
     super(treeData, styleClassNames, _nodeElements, _linkElements);
@@ -223,14 +246,7 @@ class LayeredTree extends StandardTree {
     this._treeTraversal = _treeTraversal;
   }
   public createTree(givenLayoutWidth: number | undefined, screenWidth: number) {
-    if (givenLayoutWidth !== undefined) {
-      if (givenLayoutWidth < 65) {
-        givenLayoutWidth = 65;
-      }
-      if (givenLayoutWidth > 90) {
-        givenLayoutWidth = 90;
-      }
-    }
+    givenLayoutWidth = givenLayoutWidth! < 65 ? 65 : givenLayoutWidth! > 90 ? 90 : givenLayoutWidth;
     const layoutWidth = givenLayoutWidth || 75;
     const root = hierarchy(this.treeData, d => {
       return d.children;
@@ -240,14 +256,14 @@ class LayeredTree extends StandardTree {
     const treeHeight = root?.height + 1;
 
     // Create tree layout, width: layoutWidth, height: layoutWidth/1.5 and add node separation
-    const treemap = tree()
+    const treeChart = tree()
       .nodeSize([layoutWidth, layoutWidth / 1.5])
       .separation((a, b) => {
         return a.parent === root && b.parent === root ? 3.5 : 1;
       });
 
     // Assigns the x and y position for the nodes
-    const treeData = treemap(root);
+    const treeData = treeChart(root);
 
     // Compute the new tree layout.
     const nodes = treeData.descendants();
@@ -257,7 +273,7 @@ class LayeredTree extends StandardTree {
     // Normalise x coordinate by start coordinate 0 with screenSize/3
     nodes.forEach(d => {
       d.y = d.depth === 0 ? 10 : d.depth * 130;
-      d.x += screenWidth / 3;
+      d.x += screenWidth / 2;
     });
 
     // <------------------ Traversal section ------------------>
@@ -274,6 +290,7 @@ class LayeredTree extends StandardTree {
         children: d.children,
         dataName: d.data.name,
         subName: d.data.subname,
+        bodyText: d.data.bodytext,
         metricName: d.data?.metric,
         fill: d.data.fill,
         x: d.x,
@@ -306,8 +323,8 @@ class LayeredTree extends StandardTree {
 
       // check for leaf nodes
       if (!d.children && !parentSet.has(d.parentID) && treeHeight === 3) {
-        const newWidth = (rectWidth - gap) / 2;
-        const newHeight = rectHeight;
+        const compactNodeWidth = (rectWidth - gap) / 2;
+        const compactNodeHeight = rectHeight;
         parentSet.add(d.parentID);
 
         // <------------------ Links section ------------------>
@@ -328,8 +345,9 @@ class LayeredTree extends StandardTree {
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
         const children: any = treeDataStructure[d.parentID]?.children;
 
-        const dx1: number = treeDataStructure[d.parentID]?.x;
-        const dx2: number = treeDataStructure[d.parentID]?.x + newWidth + gap;
+        const compactNodeCenterX1: number = treeDataStructure[d.parentID]?.x - compactNodeWidth / 2 - gap / 2;
+        const compactNodeCenterX2: number = treeDataStructure[d.parentID]?.x + compactNodeWidth / 2 + gap / 2;
+        const longNodeCenterX: number = treeDataStructure[d.parentID]?.x;
         let dy: number = children[0]?.y;
 
         for (let itr = 0; itr < children.length; ++itr) {
@@ -342,17 +360,20 @@ class LayeredTree extends StandardTree {
               this.addNodeShapetoSVG(
                 child.data.name,
                 child.data.subname,
+                child.data.bodytext,
                 child.data.metricName,
-                itr % 2 === 0 ? dx1 : dx2,
+                // If the leaf node count is 1 ,
+                //irrespective of provided composition we should always use long composition
+                itr % 2 === 0 ? (children.length === 1 ? longNodeCenterX : compactNodeCenterX1) : compactNodeCenterX2,
                 dy,
                 child.data.fill,
-                children.length === 1 ? rectWidth : newWidth,
+                children.length === 1 ? rectWidth : compactNodeWidth,
                 rectHeight,
                 child.id,
                 parentInfo,
               );
               if (itr % 2 === 1) {
-                dy += newHeight + gap;
+                dy += compactNodeHeight + gap;
               }
             }
             // For long compostion
@@ -360,8 +381,9 @@ class LayeredTree extends StandardTree {
               this.addNodeShapetoSVG(
                 child.data.name,
                 child.data.subname,
+                child.data.bodytext,
                 child.data.metricName,
-                dx1,
+                longNodeCenterX,
                 dy,
                 child.data.fill,
                 rectWidth,
@@ -369,7 +391,7 @@ class LayeredTree extends StandardTree {
                 child.id,
                 parentInfo,
               );
-              dy += newHeight + gap;
+              dy += compactNodeHeight + gap;
             }
           }
 
@@ -379,24 +401,26 @@ class LayeredTree extends StandardTree {
               this.addNodeShapetoSVG(
                 child.data.name,
                 child.data.subname,
+                child.data.bodytext,
                 child.data.metricName,
-                itr % 2 === 0 ? dx1 : dx2,
+                itr % 2 === 0 ? compactNodeCenterX1 : compactNodeCenterX2,
                 dy,
                 child.data.fill,
-                children.length === 1 ? rectWidth : newWidth,
+                children.length === 1 ? rectWidth : compactNodeWidth,
                 rectHeight,
                 child.id,
                 parentInfo,
               );
               if (itr % 2 === 1) {
-                dy += newHeight + gap;
+                dy += compactNodeHeight + gap;
               }
             } else {
               this.addNodeShapetoSVG(
                 child.data.name,
                 child.data.subname,
+                child.data.bodytext,
                 child.data.metricName,
-                dx1,
+                longNodeCenterX,
                 dy,
                 child.data.fill,
                 rectWidth,
@@ -404,7 +428,7 @@ class LayeredTree extends StandardTree {
                 child.id,
                 parentInfo,
               );
-              dy += newHeight + gap;
+              dy += compactNodeHeight + gap;
             }
           }
         }
@@ -412,9 +436,11 @@ class LayeredTree extends StandardTree {
 
       if (d.children || treeHeight <= 2) {
         // <------------------ Nodes section ------------------>
+        // Since the height <=2 we will be using long compositon.
         this.addNodeShapetoSVG(
           d.dataName,
           d.subName,
+          d.bodyText,
           d.metricName,
           d.x,
           d.y,
@@ -445,8 +471,8 @@ export class TreeChartBase extends React.Component<ITreeProps, ITreeState> {
   private _composition: number | undefined;
   private _classNames: IProcessedStyleSet<ITreeStyles>;
   private _margin: { left: number; right: number; top: number; bottom: number };
-  private _nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];
-  private _linkElements: Array<React.SVGProps<SVGPathElement>> = [];
+  private _nodeElements: JSX.Element[] = [];
+  private _linkElements: JSX.Element[] = [];
   private _treeTraversal: number | undefined;
 
   constructor(props: ITreeProps) {
@@ -498,27 +524,20 @@ export class TreeChartBase extends React.Component<ITreeProps, ITreeState> {
     }
   }
   public createTreeChart() {
-    const nodeElements: Array<React.SVGProps<SVGRectElement> | React.SVGProps<SVGTextElement>> = [];
-    const linkElements: Array<React.SVGProps<SVGPathElement>> = [];
-
-    // Create styleClass object to access it in parent class
-    const styleClassNames = {
-      link: this._classNames.link,
-      rectNode: this._classNames.rectNode,
-      rectText: this._classNames.rectText,
-      rectSubText: this._classNames.rectSubText,
-      rectmetricText: this._classNames.rectMetricText,
-    };
+    const nodeElements: JSX.Element[] = [];
+    const linkElements: JSX.Element[] = [];
+
     // Instantiate inherited class and call createTree function for the object
     const treeObject = new LayeredTree(
       this._treeData,
       this._composition,
-      styleClassNames,
+      this._classNames,
       nodeElements,
       linkElements,
       this._treeTraversal,
     );
-    treeObject.createTree(this.props.layoutWidth, this._width);
+    const width = this.state._width - this._margin.left - this._margin.right;
+    treeObject.createTree(this.props.layoutWidth, width);
     this._nodeElements = nodeElements;
     this._linkElements = linkElements;
   }
diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts b/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
index 4ad561f40a65a8..45f89b733d1dd3 100644
--- a/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
+++ b/packages/react-charting/src/components/TreeChart/TreeChart.styles.ts
@@ -29,6 +29,10 @@ export const getStyles = (props: ITreeStyleProps): ITreeStyles => {
       fill: '#484644',
       ...props.theme!.fonts.medium,
     },
+    rectBodyText: {
+      fill: '#808080',
+      ...props.theme!.fonts.xSmall,
+    },
     rectMetricText: {
       fill: '#000000',
       ...props.theme!.fonts.xLarge,
diff --git a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts
index 65236a2dff7de6..1217b914b0bd78 100644
--- a/packages/react-charting/src/components/TreeChart/TreeChart.types.ts
+++ b/packages/react-charting/src/components/TreeChart/TreeChart.types.ts
@@ -9,11 +9,15 @@ export interface ITreeChartDataPoint {
   /**
    * Subtext value (optional)
    */
-  subname?: string | undefined;
+  subname?: string;
+  /**
+   * Bodytext value (optional)
+   */
+  bodytext?: string;
   /**
    * Metric text value (optional)
    */
-  metric?: string | undefined;
+  metric?: string;
   /**
    * Color of the rectangular box
    */
@@ -54,12 +58,12 @@ export interface ITreeProps {
   /**
    * compostion for three layer chart, long: composition = 1; compact: composition = 0
    */
-  composition?: NodesComposition.long | NodesComposition.compact | undefined;
+  composition?: NodesComposition.long | NodesComposition.compact;
   /**
    * Node Width Size for the Tree Layout
    * * @default 75
    */
-  layoutWidth?: number | undefined;
+  layoutWidth?: number;
   /**
    * traversal order for tree chart, preOrder = 1, levelOrder = 0
    */
@@ -125,11 +129,15 @@ export interface ITreeDataStructure {
   /**
    * Subtext value (optional)
    */
-  subName?: string | undefined;
+  subName?: string;
+  /**
+   * Bodytext value (optional)
+   */
+  bodyText?: string;
   /**
    * Metric text value (optional)
    */
-  metricName?: string | undefined;
+  metricName?: string;
   /**
    * Color of the rectangular box
    */
@@ -179,6 +187,10 @@ export interface ITreeStyles {
    *  Style for the node sub Text
    */
   rectSubText: IStyle;
+  /**
+   *  Style for the node body Text
+   */
+  rectBodyText: IStyle;
   /**
    *  Style for the node metric value Text
    */
diff --git a/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap b/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
index 07cf8d44c71f63..d61c93dadc05e9 100644
--- a/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
+++ b/packages/react-charting/src/components/TreeChart/__snapshots__/TreeChart.test.tsx.snap
@@ -53,7 +53,7 @@ subText subtext Root Node"
           stroke="#0099BC"
           tabIndex={0}
           width={225}
-          x={500}
+          x={602.5}
           y={10}
         />
         <text
@@ -69,7 +69,7 @@ subText subtext Root Node"
               }
           dy={42.608695652173914}
           textAnchor="middle"
-          x={612.5}
+          x={715}
         >
           Root Node 
           <tspan
@@ -84,7 +84,7 @@ subText subtext Root Node"
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={612.5}
+            x={715}
           >
             subtext 
           </tspan>
@@ -112,7 +112,7 @@ subText subtext Parent info parentId: 0
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={130}
         />
         <text
@@ -128,7 +128,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           Child 1 
           <tspan
@@ -143,7 +143,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             100% 
           </tspan>
@@ -171,7 +171,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={106.25}
+          x={208.75}
           y={260}
         />
         <text
@@ -187,7 +187,7 @@ subText sub Parent info parentId: 1
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={157.5}
+          x={260}
         >
           leaf1 
           <tspan
@@ -202,7 +202,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={157.5}
+            x={260}
           >
             sub 
           </tspan>
@@ -230,7 +230,7 @@ subText undefined Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={228.75}
+          x={331.25}
           y={260}
         />
         <text
@@ -246,7 +246,7 @@ subText undefined Parent info parentId: 1
               }
           dy={300.7608695652174}
           textAnchor="middle"
-          x={280}
+          x={382.5}
         >
           leaf2 
         </text>
@@ -273,7 +273,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={106.25}
+          x={208.75}
           y={345.2173913043478}
         />
         <text
@@ -289,7 +289,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={157.5}
+          x={260}
         >
           leaf3 
           <tspan
@@ -304,7 +304,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={157.5}
+            x={260}
           >
             The subtext is as follows: sub 
           </tspan>
@@ -332,7 +332,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={228.75}
+          x={331.25}
           y={345.2173913043478}
         />
         <text
@@ -348,7 +348,7 @@ subText sub Parent info parentId: 1
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={280}
+          x={382.5}
         >
           leaf4 
           <tspan
@@ -363,7 +363,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={280}
+            x={382.5}
           >
             sub 
           </tspan>
@@ -391,7 +391,7 @@ subText undefined Parent info parentId: 0
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={130}
         />
         <text
@@ -407,7 +407,7 @@ subText undefined Parent info parentId: 0
               }
           dy={170.76086956521738}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           Child 2 is the child name 
         </text>
@@ -434,7 +434,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={102.5}
-          x={368.75}
+          x={471.25}
           y={260}
         />
         <text
@@ -450,7 +450,7 @@ subText sub Parent info parentId: 6
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={420}
+          x={522.5}
         >
           leaf5 
           <tspan
@@ -465,7 +465,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={420}
+            x={522.5}
           >
             sub 
           </tspan>
@@ -493,7 +493,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={102.5}
-          x={491.25}
+          x={593.75}
           y={260}
         />
         <text
@@ -509,7 +509,7 @@ subText sub Parent info parentId: 6
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={542.5}
+          x={645}
         >
           leaf6 
           <tspan
@@ -524,7 +524,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={542.5}
+            x={645}
           >
             sub 
           </tspan>
@@ -552,7 +552,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={130}
         />
         <text
@@ -568,7 +568,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           Child 3 
           <tspan
@@ -583,7 +583,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             The subtext is as follows: subtext 
           </tspan>
@@ -611,7 +611,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={631.25}
+          x={733.75}
           y={260}
         />
         <text
@@ -627,7 +627,7 @@ subText sub Parent info parentId: 9
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={682.5}
+          x={785}
         >
           leaf7 
           <tspan
@@ -642,7 +642,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={682.5}
+            x={785}
           >
             sub 
           </tspan>
@@ -670,7 +670,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={753.75}
+          x={856.25}
           y={260}
         />
         <text
@@ -686,7 +686,7 @@ subText sub Parent info parentId: 9
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={805}
+          x={907.5}
         >
           leaf8 
           <tspan
@@ -701,7 +701,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={805}
+            x={907.5}
           >
             sub 
           </tspan>
@@ -729,7 +729,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={631.25}
+          x={733.75}
           y={345.2173913043478}
         />
         <text
@@ -745,7 +745,7 @@ subText sub Parent info parentId: 9
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={682.5}
+          x={785}
         >
           leaf9 
           <tspan
@@ -760,7 +760,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={682.5}
+            x={785}
           >
             sub 
           </tspan>
@@ -788,7 +788,7 @@ subText subtext Parent info parentId: 0
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={130}
         />
         <text
@@ -804,7 +804,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           Child 4 
           <tspan
@@ -819,7 +819,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             90% 
           </tspan>
@@ -847,7 +847,7 @@ subText sub Parent info parentId: 13
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={260}
         />
         <text
@@ -863,7 +863,7 @@ subText sub Parent info parentId: 13
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           leaf10 
           <tspan
@@ -878,7 +878,7 @@ subText sub Parent info parentId: 13
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             sub 
           </tspan>
@@ -895,7 +895,7 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M106.25,110 H1118.75 M612.5,110
+          d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
         />
         <path
@@ -906,7 +906,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M218.75,205.2173913043478 V230 H106.25 H331.25"
+          d="M321.25,205.2173913043478 V230
+    H208.75 H433.75"
         />
         <path
           className=
@@ -916,7 +917,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M481.25,205.2173913043478 V230 H368.75 H593.75"
+          d="M583.75,205.2173913043478 V230
+    H471.25 H696.25"
         />
         <path
           className=
@@ -926,7 +928,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M743.75,205.2173913043478 V230 H631.25 H856.25"
+          d="M846.25,205.2173913043478 V230
+    H733.75 H958.75"
         />
         <path
           className=
@@ -936,7 +939,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M1006.25,205.2173913043478 V230 H893.75 H1118.75"
+          d="M1108.75,205.2173913043478 V230
+    H996.25 H1221.25"
         />
       </g>
     </svg>
@@ -997,7 +1001,7 @@ subText subtext Root Node"
           stroke="#0099BC"
           tabIndex={0}
           width={225}
-          x={500}
+          x={602.5}
           y={10}
         />
         <text
@@ -1013,7 +1017,7 @@ subText subtext Root Node"
               }
           dy={42.608695652173914}
           textAnchor="middle"
-          x={612.5}
+          x={715}
         >
           Root Node 
           <tspan
@@ -1028,7 +1032,7 @@ subText subtext Root Node"
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={612.5}
+            x={715}
           >
             subtext 
           </tspan>
@@ -1056,7 +1060,7 @@ subText subtext Parent info parentId: 0
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={130}
         />
         <text
@@ -1072,7 +1076,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           Child 1 
           <tspan
@@ -1087,7 +1091,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             100% 
           </tspan>
@@ -1115,7 +1119,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={260}
         />
         <text
@@ -1131,7 +1135,7 @@ subText sub Parent info parentId: 1
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           leaf1 
           <tspan
@@ -1146,7 +1150,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             sub 
           </tspan>
@@ -1174,7 +1178,7 @@ subText undefined Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={345.2173913043478}
         />
         <text
@@ -1190,7 +1194,7 @@ subText undefined Parent info parentId: 1
               }
           dy={385.9782608695652}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           leaf2 
         </text>
@@ -1217,7 +1221,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={430.4347826086956}
         />
         <text
@@ -1233,7 +1237,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
               }
           dy={463.04347826086956}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           leaf3 
           <tspan
@@ -1248,7 +1252,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             The subtext is as follows: sub 
           </tspan>
@@ -1276,7 +1280,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={515.6521739130435}
         />
         <text
@@ -1292,7 +1296,7 @@ subText sub Parent info parentId: 1
               }
           dy={548.2608695652174}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           leaf4 
           <tspan
@@ -1307,7 +1311,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             sub 
           </tspan>
@@ -1335,7 +1339,7 @@ subText undefined Parent info parentId: 0
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={130}
         />
         <text
@@ -1351,7 +1355,7 @@ subText undefined Parent info parentId: 0
               }
           dy={170.76086956521738}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           Child 2 is the child name 
         </text>
@@ -1378,7 +1382,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={260}
         />
         <text
@@ -1394,7 +1398,7 @@ subText sub Parent info parentId: 6
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           leaf5 
           <tspan
@@ -1409,7 +1413,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={481.25}
+            x={583.75}
           >
             sub 
           </tspan>
@@ -1437,7 +1441,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={345.2173913043478}
         />
         <text
@@ -1453,7 +1457,7 @@ subText sub Parent info parentId: 6
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           leaf6 
           <tspan
@@ -1468,7 +1472,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={481.25}
+            x={583.75}
           >
             sub 
           </tspan>
@@ -1496,7 +1500,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={130}
         />
         <text
@@ -1512,7 +1516,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           Child 3 
           <tspan
@@ -1527,7 +1531,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             The subtext is as follows: subtext 
           </tspan>
@@ -1555,7 +1559,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={260}
         />
         <text
@@ -1571,7 +1575,7 @@ subText sub Parent info parentId: 9
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           leaf7 
           <tspan
@@ -1586,7 +1590,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             sub 
           </tspan>
@@ -1614,7 +1618,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={345.2173913043478}
         />
         <text
@@ -1630,7 +1634,7 @@ subText sub Parent info parentId: 9
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           leaf8 
           <tspan
@@ -1645,7 +1649,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             sub 
           </tspan>
@@ -1673,7 +1677,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={430.4347826086956}
         />
         <text
@@ -1689,7 +1693,7 @@ subText sub Parent info parentId: 9
               }
           dy={463.04347826086956}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           leaf9 
           <tspan
@@ -1704,7 +1708,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             sub 
           </tspan>
@@ -1732,7 +1736,7 @@ subText subtext Parent info parentId: 0
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={130}
         />
         <text
@@ -1748,7 +1752,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           Child 4 
           <tspan
@@ -1763,7 +1767,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             90% 
           </tspan>
@@ -1791,7 +1795,7 @@ subText sub Parent info parentId: 13
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={260}
         />
         <text
@@ -1807,7 +1811,7 @@ subText sub Parent info parentId: 13
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           leaf10 
           <tspan
@@ -1822,7 +1826,7 @@ subText sub Parent info parentId: 13
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             sub 
           </tspan>
@@ -1839,7 +1843,7 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M106.25,110 H1118.75 M612.5,110
+          d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
         />
         <path
@@ -1850,7 +1854,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M218.75,205.2173913043478 V230 H106.25 H331.25"
+          d="M321.25,205.2173913043478 V230
+    H208.75 H433.75"
         />
         <path
           className=
@@ -1860,7 +1865,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M481.25,205.2173913043478 V230 H368.75 H593.75"
+          d="M583.75,205.2173913043478 V230
+    H471.25 H696.25"
         />
         <path
           className=
@@ -1870,7 +1876,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M743.75,205.2173913043478 V230 H631.25 H856.25"
+          d="M846.25,205.2173913043478 V230
+    H733.75 H958.75"
         />
         <path
           className=
@@ -1880,7 +1887,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M1006.25,205.2173913043478 V230 H893.75 H1118.75"
+          d="M1108.75,205.2173913043478 V230
+    H996.25 H1221.25"
         />
       </g>
     </svg>
@@ -1941,7 +1949,7 @@ subText subtext Root Node"
           stroke="#0099BC"
           tabIndex={0}
           width={225}
-          x={500}
+          x={602.5}
           y={10}
         />
         <text
@@ -1957,7 +1965,7 @@ subText subtext Root Node"
               }
           dy={42.608695652173914}
           textAnchor="middle"
-          x={612.5}
+          x={715}
         >
           Root Node 
           <tspan
@@ -1972,7 +1980,7 @@ subText subtext Root Node"
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={612.5}
+            x={715}
           >
             subtext 
           </tspan>
@@ -2000,7 +2008,7 @@ subText subtext Parent info parentId: 0
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={130}
         />
         <text
@@ -2016,7 +2024,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           Child 1 
           <tspan
@@ -2031,7 +2039,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             100% 
           </tspan>
@@ -2059,7 +2067,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={106.25}
+          x={208.75}
           y={260}
         />
         <text
@@ -2075,7 +2083,7 @@ subText sub Parent info parentId: 1
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={157.5}
+          x={260}
         >
           leaf1 
           <tspan
@@ -2090,7 +2098,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={157.5}
+            x={260}
           >
             sub 
           </tspan>
@@ -2118,7 +2126,7 @@ subText undefined Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={228.75}
+          x={331.25}
           y={260}
         />
         <text
@@ -2134,7 +2142,7 @@ subText undefined Parent info parentId: 1
               }
           dy={300.7608695652174}
           textAnchor="middle"
-          x={280}
+          x={382.5}
         >
           leaf2 
         </text>
@@ -2161,7 +2169,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={106.25}
+          x={208.75}
           y={345.2173913043478}
         />
         <text
@@ -2177,7 +2185,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={157.5}
+          x={260}
         >
           leaf3 
           <tspan
@@ -2192,7 +2200,7 @@ subText The subtext is as follows: sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={157.5}
+            x={260}
           >
             The subtext is as follows: sub 
           </tspan>
@@ -2220,7 +2228,7 @@ subText sub Parent info parentId: 1
           stroke="#4F6BED"
           tabIndex={0}
           width={102.5}
-          x={228.75}
+          x={331.25}
           y={345.2173913043478}
         />
         <text
@@ -2236,7 +2244,7 @@ subText sub Parent info parentId: 1
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={280}
+          x={382.5}
         >
           leaf4 
           <tspan
@@ -2251,7 +2259,7 @@ subText sub Parent info parentId: 1
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={280}
+            x={382.5}
           >
             sub 
           </tspan>
@@ -2279,7 +2287,7 @@ subText undefined Parent info parentId: 0
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={130}
         />
         <text
@@ -2295,7 +2303,7 @@ subText undefined Parent info parentId: 0
               }
           dy={170.76086956521738}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           Child 2 is the child name 
         </text>
@@ -2322,7 +2330,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={260}
         />
         <text
@@ -2338,7 +2346,7 @@ subText sub Parent info parentId: 6
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           leaf5 
           <tspan
@@ -2353,7 +2361,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={481.25}
+            x={583.75}
           >
             sub 
           </tspan>
@@ -2381,7 +2389,7 @@ subText sub Parent info parentId: 6
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={345.2173913043478}
         />
         <text
@@ -2397,7 +2405,7 @@ subText sub Parent info parentId: 6
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           leaf6 
           <tspan
@@ -2412,7 +2420,7 @@ subText sub Parent info parentId: 6
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={481.25}
+            x={583.75}
           >
             sub 
           </tspan>
@@ -2440,7 +2448,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={130}
         />
         <text
@@ -2456,7 +2464,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           Child 3 
           <tspan
@@ -2471,7 +2479,7 @@ subText The subtext is as follows: subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             The subtext is as follows: subtext 
           </tspan>
@@ -2499,7 +2507,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={631.25}
+          x={733.75}
           y={260}
         />
         <text
@@ -2515,7 +2523,7 @@ subText sub Parent info parentId: 9
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={682.5}
+          x={785}
         >
           leaf7 
           <tspan
@@ -2530,7 +2538,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={682.5}
+            x={785}
           >
             sub 
           </tspan>
@@ -2558,7 +2566,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={753.75}
+          x={856.25}
           y={260}
         />
         <text
@@ -2574,7 +2582,7 @@ subText sub Parent info parentId: 9
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={805}
+          x={907.5}
         >
           leaf8 
           <tspan
@@ -2589,7 +2597,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={805}
+            x={907.5}
           >
             sub 
           </tspan>
@@ -2617,7 +2625,7 @@ subText sub Parent info parentId: 9
           stroke="#AE8C00"
           tabIndex={0}
           width={102.5}
-          x={631.25}
+          x={733.75}
           y={345.2173913043478}
         />
         <text
@@ -2633,7 +2641,7 @@ subText sub Parent info parentId: 9
               }
           dy={377.82608695652175}
           textAnchor="middle"
-          x={682.5}
+          x={785}
         >
           leaf9 
           <tspan
@@ -2648,7 +2656,7 @@ subText sub Parent info parentId: 9
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={682.5}
+            x={785}
           >
             sub 
           </tspan>
@@ -2676,7 +2684,7 @@ subText subtext Parent info parentId: 0
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={130}
         />
         <text
@@ -2692,7 +2700,7 @@ subText subtext Parent info parentId: 0
               }
           dy={156.08695652173913}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           Child 4 
           <tspan
@@ -2707,7 +2715,7 @@ subText subtext Parent info parentId: 0
                   font-weight: 600;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             90% 
           </tspan>
@@ -2735,7 +2743,7 @@ subText sub Parent info parentId: 13
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={260}
         />
         <text
@@ -2751,7 +2759,7 @@ subText sub Parent info parentId: 13
               }
           dy={292.60869565217394}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           leaf10 
           <tspan
@@ -2766,7 +2774,7 @@ subText sub Parent info parentId: 13
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             sub 
           </tspan>
@@ -2783,7 +2791,7 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M106.25,110 H1118.75 M612.5,110
+          d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
         />
         <path
@@ -2794,7 +2802,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M218.75,205.2173913043478 V230 H106.25 H331.25"
+          d="M321.25,205.2173913043478 V230
+    H208.75 H433.75"
         />
         <path
           className=
@@ -2804,7 +2813,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M481.25,205.2173913043478 V230 H368.75 H593.75"
+          d="M583.75,205.2173913043478 V230
+    H471.25 H696.25"
         />
         <path
           className=
@@ -2814,7 +2824,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M743.75,205.2173913043478 V230 H631.25 H856.25"
+          d="M846.25,205.2173913043478 V230
+    H733.75 H958.75"
         />
         <path
           className=
@@ -2824,7 +2835,8 @@ subText sub Parent info parentId: 13
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M1006.25,205.2173913043478 V230 H893.75 H1118.75"
+          d="M1108.75,205.2173913043478 V230
+    H996.25 H1221.25"
         />
       </g>
     </svg>
@@ -2885,7 +2897,7 @@ subText subtext Root Node"
           stroke="#0099BC"
           tabIndex={0}
           width={225}
-          x={500}
+          x={602.5}
           y={10}
         />
         <text
@@ -2901,7 +2913,7 @@ subText subtext Root Node"
               }
           dy={42.608695652173914}
           textAnchor="middle"
-          x={612.5}
+          x={715}
         >
           Root Node 
           <tspan
@@ -2916,7 +2928,7 @@ subText subtext Root Node"
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={612.5}
+            x={715}
           >
             subtext 
           </tspan>
@@ -2944,7 +2956,7 @@ subText Subtext val is subtext Parent info parentId: 0
           stroke="#4F6BED"
           tabIndex={0}
           width={225}
-          x={106.25}
+          x={208.75}
           y={130}
         />
         <text
@@ -2960,7 +2972,7 @@ subText Subtext val is subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={218.75}
+          x={321.25}
         >
           Child 1 
           <tspan
@@ -2975,7 +2987,7 @@ subText Subtext val is subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={218.75}
+            x={321.25}
           >
             Subtext val is subtext 
           </tspan>
@@ -3003,7 +3015,7 @@ subText Subtext val is subtext Parent info parentId: 0
           stroke="#881798"
           tabIndex={0}
           width={225}
-          x={368.75}
+          x={471.25}
           y={130}
         />
         <text
@@ -3019,7 +3031,7 @@ subText Subtext val is subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={481.25}
+          x={583.75}
         >
           Child 2 
           <tspan
@@ -3034,7 +3046,7 @@ subText Subtext val is subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={481.25}
+            x={583.75}
           >
             Subtext val is subtext 
           </tspan>
@@ -3062,7 +3074,7 @@ subText Subtext val is subtext Parent info parentId: 0
           stroke="#AE8C00"
           tabIndex={0}
           width={225}
-          x={631.25}
+          x={733.75}
           y={130}
         />
         <text
@@ -3078,7 +3090,7 @@ subText Subtext val is subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={743.75}
+          x={846.25}
         >
           Child 3 
           <tspan
@@ -3093,7 +3105,7 @@ subText Subtext val is subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={743.75}
+            x={846.25}
           >
             Subtext val is subtext 
           </tspan>
@@ -3121,7 +3133,7 @@ subText Subtext val is subtext Parent info parentId: 0
           stroke="#FF00FF"
           tabIndex={0}
           width={225}
-          x={893.75}
+          x={996.25}
           y={130}
         />
         <text
@@ -3137,7 +3149,7 @@ subText Subtext val is subtext Parent info parentId: 0
               }
           dy={162.6086956521739}
           textAnchor="middle"
-          x={1006.25}
+          x={1108.75}
         >
           Child 4 
           <tspan
@@ -3152,7 +3164,7 @@ subText Subtext val is subtext Parent info parentId: 0
                   font-weight: 400;
                 }
             dy="1.4em"
-            x={1006.25}
+            x={1108.75}
           >
             Subtext val is subtext 
           </tspan>
@@ -3169,7 +3181,7 @@ subText Subtext val is subtext Parent info parentId: 0
                 stroke-width: 2px;
                 stroke: #A1A1A1;
               }
-          d="M106.25,110 H1118.75 M612.5,110
+          d="M208.75,110 H1221.25 M715,110
     V85.21739130434783"
         />
       </g>
diff --git a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
index 11a281a1556bc2..b38aa9070b74c0 100644
--- a/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
+++ b/packages/react-examples/src/react-charting/TreeChart/TreeChart.ThreeLayer.Example.tsx
@@ -4,6 +4,7 @@ import { TreeChart, ITreeProps, ITreeState } from '@fluentui/react-charting';
 const threeLayerChart = {
   name: 'Root Node',
   subname: 'subtext',
+  bodytext: 'bodytext',
   fill: '#0099BC',
   children: [
     {