DiagramRuler API in JavaScript Diagram API control

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

string

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

string

Defines and sets the tick alignment of the ruler scale.

Defaults to ‘RightOrBottom’