cssreactjsreact-flow

How do I change the position of the label in the Nodes of ReactFlow?

I am trying to change the position of the label of reactflow node from Center to the left side and rotate it 90deg, for example something like this.enter image description here can anyone tell me how I can achive this

I tried using chatgpt but it couldn't help, Searched google but no avail

Solution

  • You can create a custom node in reactflow and then customize it to exhibit the above behavior. The custom node can be implemented as below.

    <div id="text-rotate">
  <p>Label</p>
</div>

    #text-rotate {
   transform: rotate(90deg);
}