How to Update Node Size Based on Text Size in React Diagram?

In Syncfusion® React Diagram, annotations can be applied to both nodes and connectors. In this guide, we demonstrate how to dynamically update the size of a node based on the text size of its annotation.

First, include an input element in your HTML that will allow the user to modify the font size of the annotation. This input field will trigger the node size update when the font size changes.

<input id="fontSize" type="number" min={10} max={30} placeholder={12} onChange={updateNodeSize}/>

Next, define a function in that will be triggered when the font size changes. This function will update both the font size of the annotation, and the size of the node based on the new font size.

// Function to update node size based on user-selected font size
function updateNodeSize() {
 // Retrieve the font size from the input field
 var fontSize = Number(document.getElementById('fontSize').value);
 // Ensure that the font size does not go below 10
 if (fontSize < 10) {
   fontSize = 10;
 }
 // Ensure that the font size does not exceed 30
 if (fontSize > 30) {
   fontSize = 30;
 }
 var node = diagramInstance.nodes[0];
 var annotation = node.annotations[0];
 
 // Update the fontSize of the annotation
 annotation.style.fontSize = fontSize;
 
 // Adjust the node's width and height 
 node.width = fontSize * 8;  // Modify based on your requirement
 node.height = fontSize * 8;  // Modify based on your requirement
 
 // Re-render the diagram to apply changes
 diagramInstance.dataBind();
}

You can find a working example of this implementation on StackBlitz in the provided link: Click here for sample

Conclusion

I hope you enjoyed learning how to update node size based on text size in React Diagram.
You can refer to our React Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!