3

I'm using the mxGraph library to render some diagrams, can someone help me to position the edge labels at the bottom instead of the middle?

Thanks in advance!

Christian Leon
  • 97
  • 1
  • 7

1 Answers1

2

In a stylesheet for relevant edges do

<add as="verticalAlign" value="top" />
<add as="verticalLabelPosition" value="bottom" />

Or do it inline when inserting an edge

graph.insertEdge(..., 'defaultEdge;verticalAlign=top;verticalLabelPosition=bottom');

"defaultEdge" is there to keep the rest of default styles, not override them completely.

This positions label bounds on the bottom of an edge, and positions labels at the top of their bounds.

Vsevolod Golovanov
  • 4,068
  • 3
  • 31
  • 65
  • Suppose I have this: ** **, Do I add the lines you refered within the mxGeometry node? – Christian Leon Nov 25 '17 at 18:17
  • 1
    No, if you're editing the model via XML then you need to add the `style="defaultEdge;verticalAlign=top;verticalLabelPosition=bottom"` attribute to `mxCell` elements. Further reading: https://jgraph.github.io/mxgraph/docs/manual.html#3.1.3.1 Programmatic stylesheet example: https://github.com/jgraph/mxgraph/blob/master/javascript/examples/stylesheet.html – Vsevolod Golovanov Nov 26 '17 at 10:55
  • Works perfectly for me with mxGraph 3.7.5. Without a reproducer of your problem in code (preferably [MCVE](https://stackoverflow.com/help/mcve)) it's impossible to tell, why it doesn't work for you. – Vsevolod Golovanov Nov 27 '17 at 10:20