How to set Font size dynamically for the diagram Node or Annotation

Question

Hi,Facing problem with diagram Nodes.Node text is displaying very high if the nodes are more and diagram size is high.Currently using FontSize  25          Node text is displaying very low if the nodes are more and diagram size is high.          how set dynamic font size that should  depends on diagram size.How to set Warp for Annotations text.          Could you please help me on this.Regards,Subramanyam G

Aravind Ravi · Answer

Hi Subramanyam, 
 
Please find the response for queries in below table 
 




how set dynamic font size that should  depends on diagram size. 

Could you please confirm that you want to change the font size dynamically when zoom in or zoom out the diagram. If yes, then by using diagram scroller current zoom property we can change the font size. After zoom in / zoom out the diagram then check if current zoom value is less than or greater than 1. If greater than 1 means then divide font size with zoom factor else multiply with zoom factor.  
 




let zoom: number = this.diagram.scroller.currentZoom; 
    for (let i: number = 0; i < this.diagram.nodes.length; i++) { 
      if (zoom < 1) { 
        this.diagram.nodes[i].annotations[0].style.fontSize += 
          this.diagram.nodes[i].annotations[0].style.fontSize * zoom; 
      } else { 
        this.diagram.nodes[i].annotations[0].style.fontSize = 
          this.diagram.nodes[i].annotations[0].style.fontSize / zoom; 
      } 
          this.diagram.dataBind(); 
 
} 
 
 


How to set Wrap for Annotations text. 

By using annotation textWrapping property we can able to do wrap for annotations text. Please find the below code snippet for how to set wrap for annotations  
 




public nodes: NodeModel[] = [{ 
    id: 'node1', width: 100, height: 100, offsetX: 300, offsetY: 100, 
    annotations: [{ content: 'Node1', style: { textWrapping: 'Wrap'} }], 
     
}]; 
 
For more information about text wrapping please refer to below UG documentation link 
 
UG Link: https://ej2.syncfusion.com/angular/documentation/diagram/labels/?no-cache=1#wrapping 
 
 
Regards 
Aravind Ravi