DiagramRuler

23 Sep 20251 minute to read

Defines the properties of both horizontal and vertical guides/rulers to measure the diagram area.

Properties

arrangeTick Function|string

Defines the method which is used to position and arrange the tick elements of the ruler.

<div id='diagram'></div>

let arrange: Function = (args: IArrangeTickOptions) => {
if (args.tickInterval % 10 == 0) {
args.tickLength = 25;
}
}
let diagram: Diagram = new Diagram({
...
rulerSettings: { showRulers: true,
horizontalRuler: { segmentWidth: 50, orientation: 'Horizontal', interval: 10,  arrangeTick: arrange },
verticalRuler: {segmentWidth: 200,interval: 20, thickness: 20,
tickAlignment: 'LeftOrTop', segmentWidth: 50, markerColor: 'red' }
},
...
});
diagram.appendTo('#diagram');

Defaults to null

interval number

Defines the number of intervals to be present on each segment of the ruler.

Defaults to 5

markerColor string

Defines the color of the ruler marker brush.

Defaults to ‘red’

orientation RulerOrientation

Defines the orientation of the ruler

Defaults to ‘Horizontal’

segmentWidth number

Defines the textual description of the ruler segment, and the appearance of the ruler ticks of the ruler.

Defaults to 100

thickness number

Defines the height of the ruler.

Defaults to 25

tickAlignment TickAlignment

Defines and sets the tick alignment of the ruler scale.

Defaults to ‘RightOrBottom’