Ruler in JavaScript (ES5) Diagram control

08 May 2023 / 2 minutes to read

The Ruler provides a horizontal and vertical guide for measuring in the Diagram control. The Ruler can be used to measure the diagram objects, indicate positions, and align diagram elements. This is especially useful in creating scale models.

Adding Rulers to the Diagram

The rulerSettingsproperty is used to control the visibility and appearance of the ruler in the diagram.
The RulerSettings showRulersproperty is used to show or hide the rulers in the diagram.
The RulerSettings horizontalRuler and verticalRuler properties are used to customize the rulers appearance in the diagram.

The following code shows how to add a ruler to the diagram.

Source

Preview

index.js

index.html

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '600px', 
        rulerSettings: {
            showRulers: true
        },
});
diagram.appendTo('#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Customizing the Ruler

By default, the ruler segments are arranged based on pixel values.

The HorizontalRuler’s intervalproperty allows you to define the interval between ruler segments and the segmentWidth property allows you to define the segment width of the ruler. Similarly, you can use the VerticalRuler’s interval and segmentWidth properties are used to define the interval and segment width of the vertical ruler
The HorizontalRuler’s tickAlignment property is used to align the ruler tick either left or right side of the ruler. The VerticalRuler’s tickAlignment property is used to align the ruler tick either top or bottom side of the ruler.
The HorizontalRuler’s arrangeTick and VerticalRuler’s arrangeTick function is provided for the purpose of customizing the appearance of ruler ticks. It will be called for each tick rendering.
The HorizontalRuler’s markerColor and VerticalRuler’s markerColor properties are used to define the ruler marker color and marker will be shown when performing the interaction in the diagram.

The following code shows how the diagram ruler can be customized.

Source

Preview

index.js

index.html

var diagram = new ej.diagrams.Diagram({
    width: '100%', height: '600px', 
        rulerSettings: {
            showRulers: true, horizontalRuler:{interval:8, segmentWidth:100, thickness:35, tickAlignment:"LeftOrTop"}, verticalRuler:{interval:10, segmentWidth:150, thickness:35, tickAlignment:"RightOrBottom"}
        },
});
diagram.appendTo('#element');

<!DOCTYPE html><html lang="en"><head>
            
    <title>EJ2 Diagram</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-diagrams/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/fabric.css" rel="stylesheet">
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
    </div>
    

<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>

Note : The MarkerColor property can be customized using the marker CSS style.

Contents

Adding Rulers to the Diagram
Customizing the Ruler

Contents

Adding Rulers to the Diagram
Customizing the Ruler