Ruler in Angular Diagram Component

25 Aug 20257 minutes to read

The ruler provides horizontal and vertical guides for measuring in the diagram control. It can be used to measure diagram objects, indicate positions, and align diagram elements, making it especially useful for creating scale models. The ruler also includes a position indicator that displays the precise location of the mouse cursor on the diagram canvas, with the default color of the position indicator marker being red.

The diagram ruler consists of two components: a horizontal ruler displayed along the top edge and a vertical ruler along the left edge of the diagram canvas. Both rulers work together to provide comprehensive positioning and measurement capabilities.

Define rulers

The rulerSettings property of diagram controls the visibility and appearance of the ruler in the diagram.

The showRulers property shows or hides the rulers in the diagram.

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

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { showRulers: true}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customizing the Ruler

The horizontalRuler and verticalRuler properties of rulerSettings customize the rulers appearance in the diagram.

By default, the ruler segments are arranged based on pixel values, with each segment representing a unit of measurement on the diagram canvas.

Ruler spacing and dimensions

The interval property defines the spacing between ruler segments, while the segmentWidth property sets the width of each segment. These properties apply to both horizontal and vertical rulers.

Tick alignment

The tickAlignment property controls the positioning of ruler tick marks. For the horizontal ruler, ticks can be aligned to the left or right side, while for the vertical ruler, they can be aligned to the top or bottom.

Ruler thickness

The thickness property sets the thickness of the ruler display area for both horizontal and vertical rulers.

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

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { showRulers: true, 
        horizontalRuler:{
            interval:8, 
            segmentWidth:100, 
            thickness:25, 
            //Align horizontal ruler tick to the bottom side.
            tickAlignment:"RightOrBottom"
        },
        verticalRuler:{
            interval:10, 
            segmentWidth:200, 
            thickness:35, 
            //Align vertical ruler tick to the left side.
            tickAlignment:"LeftOrTop"
        } 
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Arrange tick

The arrangeTick function allows customization of ruler tick appearance for both horizontal and vertical rulers. This function is called during the rendering of each tick mark, providing control over tick properties such as length and style.

The following code demonstrates how to use the arrangeTick function to customize the tick length.

import { Component, OnInit, ViewEncapsulation, ViewChild } from '@angular/core';
import { DiagramModule, DiagramComponent ,RulerSettingsModel} from '@syncfusion/ej2-angular-diagrams';


@Component({
imports: [
         DiagramModule
    ],
    providers: [ ],
    standalone: true,
    selector: "app-container",
    template: `<div><ejs-diagram #diagram id="diagram" width="100%" height="600px" [rulerSettings]='rulerSettings'></ejs-diagram></div>`,
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
     @ViewChild('diagram')
    public diagram?: DiagramComponent;
    public rulerSettings: RulerSettingsModel = { showRulers: true, horizontalRuler:{interval:10, segmentWidth:50, thickness:50, arrangeTick: this.arrangeTicks },verticalRuler:{interval:20, segmentWidth:200, thickness:20, tickAlignment:"LeftOrTop", markerColor: 'blue' }  };

    // To arrange ruler tick.
    private arrangeTicks(args: any) {
        if (args.tickInterval % 10 === 0) {
          // Set the tick length to 25 when the interval is divisible by 10
          args.tickLength = 45;
        }
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Marker color

The markerColor property defines the ruler marker color for both horizontal and vertical rulers. The marker appears when hovering the mouse over the diagram canvas, providing precise position feedback.

The marker color can also be customized using CSS styles for advanced styling requirements.