React

Search results

Gridlines

Gridlines are the pattern of lines drawn behind the diagram elements. It provides a visual guidance while dragging or arranging the objects on the diagram surface.

The model’s snapSettings property is used to customize the gridlines and control the snapping behavior in the diagram.

Customize the gridlines visibility

The snapSettings.snapConstraints enables you to show/hide the gridlines. The following code example illustrates how to show or hide gridlines.

If you need to enable snapping, then inject snapping module into the diagram.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints } from "@syncfusion/ej2-react-diagrams";
let snapSettings = {
    constraints: SnapConstraints.ShowLines,
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}/>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";

let snapSettings: SnapSettingsModel = {
  constraints: SnapConstraints.ShowLines,
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        />,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

To show only horizontal/vertical gridlines or to hide gridlines, refer to Constraints.

Appearance

The appearance of the gridlines can be customized by using a set of predefined properties.

The horizontalGridLines and the verticalGridLines properties allow to customize the appearance of the horizontal and vertical gridlines respectively.
The horizontal gridlines lineColor and lineDashArray properties are used to customizes the line color and line style of the horizontal gridlines.
The vertical gridlines lineColor and lineDashArray properties are used to customizes the line color and line style of the vertical gridlines.

The following code example illustrates how to customize the appearance of gridlines.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints } from "@syncfusion/ej2-react-diagrams";
let gridlines = {
    lineColor: "blue",
    lineDashArray: '2 2'
};
let snapSettings = {
    constraints: SnapConstraints.ShowLines,
    horizontalGridlines: gridlines,
    verticalGridlines: gridlines
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}/>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";
let gridlines: GridlinesModel = {
  lineColor: "blue",
  lineDashArray: '2 2'
};
let snapSettings: SnapSettingsModel = {
  constraints: SnapConstraints.ShowLines,
  horizontalGridlines: gridlines,
  verticalGridlines: gridlines
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        />,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Line intervals

Thickness and the space between gridlines can be customized by using horizontal gridlines’s linesInterval and vertical gridlines’s linesInterval properties. In the lines interval collections, values at the odd places are referred as the thickness of lines and values at the even places are referred as the space between gridlines. The following code example illustrates how to customize the thickness of lines and the line intervals.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints } from "@syncfusion/ej2-react-diagrams";
let interval;
interval = [
    1,
    9,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75,
    0.25,
    9.75
];
let gridlines = {
    lineColor: 'blue',
    lineDashArray: '2 2',
    lineIntervals: interval
};
let snapSettings = {
    constraints: SnapConstraints.ShowLines,
    horizontalGridlines: gridlines,
    verticalGridlines: gridlines
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}/>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";
let interval: number[];
interval = [
  1,
  9,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75,
  0.25,
  9.75
];
let gridlines: GridlinesModel = {
  lineColor: 'blue',
  lineDashArray: '2 2',
  lineIntervals: interval
};
let snapSettings: SnapSettingsModel = {
  constraints: SnapConstraints.ShowLines,
  horizontalGridlines: gridlines,
  verticalGridlines: gridlines
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        />,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Snapping

Snap to lines

This feature allows the diagram objects to snap to the nearest intersection of gridlines while being dragged or resized. This feature enables easier alignment during layout or design.

Snapping to gridlines can be enabled/disabled with the snapSettings.snapConstraints. The following code example illustrates how to enable/disable the snapping to gridlines.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints, Snapping, Inject } from "@syncfusion/ej2-react-diagrams";
let snapSettings = {
    constraints: SnapConstraints.SnapToLines | SnapConstraints.ShowLines
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}><Inject services={[Snapping]}/>
        </DiagramComponent>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";
let snapSettings: SnapSettingsModel = {
    constraints: SnapConstraints.SnapToLines | SnapConstraints.ShowLines
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        ><Inject services = {[Snapping]}/>
        </DiagramComponent>,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Customization of snap intervals

By default, the objects are snapped towards the nearest gridline. The gridline or position towards where the diagram object snaps can be customized with the horizontal gridlines’s snapInterval and the vertical gridlines’s snapInterval properties.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints, Snapping, Inject } from "@syncfusion/ej2-react-diagrams";
let gridlines = {
    // Defines the snap interval for object
    snapIntervals: [10],
};
let snapSettings = {
    constraints: SnapConstraints.All,
    horizontalGridlines: gridlines,
    verticalGridlines: gridlines
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 250,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}><Inject services={[Snapping]}/>
        </DiagramComponent>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";
let gridlines: GridlinesModel = {
  // Defines the snap interval for object
  snapIntervals: [10],
};
let snapSettings: SnapSettingsModel = {
  constraints: SnapConstraints.All,
  horizontalGridlines: gridlines,
  verticalGridlines: gridlines
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 250,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
    // Text(label) added to the node
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        ><Inject services = {[Snapping]}/>
        </DiagramComponent>,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Snap to objects

The snap to object provides visual cues to assist with aligning and spacing diagram elements. A node can be snapped with its neighbouring objects based on certain alignments. Such alignments are visually represented as smart guides.

The snapObjectDistance property allows you to define minimum distance between the selected object and the nearest object.

The snapAngle property allows you to define the snap angle by which the object needs to be rotated.

The snapconstraints property allows you to enable or disable the certain features of the snapping, refer to snapconstraints.

Source

Preview

index.jsx

index.tsx

index.html

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent, SnapConstraints, Snapping, Inject } from "@syncfusion/ej2-react-diagrams";
let snapSettings = {
    snapObjectDistance: 10,
    snapAngle: 10,
    constraints: SnapConstraints.SnapToObject | SnapConstraints.ShowLines,
};
// A node is created and stored in nodes array.
let node = [{
        // Position of the node
        offsetX: 250,
        offsetY: 100,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    },
    {
        // Position of the node
        offsetX: 450,
        offsetY: 100,
        // Size of the node
        width: 100,
        height: 100,
        style: {
            fill: '#6BA5D7',
            strokeColor: 'white'
        },
    }];
// initialize Diagram component
ReactDOM.render(<DiagramComponent id="diagram" width={'100%'} height={'600px'} 
// Add node
nodes={node} snapSettings={snapSettings}><Inject services={[Snapping]}/>
        </DiagramComponent>, document.getElementById("diagram"));

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
    Diagram,
    NodeModel,
    DiagramComponent,
    SnapSettingsModel,
    SnapConstraints,
    UndoRedo,
    GridlinesModel,
    Snapping,
    Inject
} from "@syncfusion/ej2-react-diagrams";
let snapSettings: SnapSettingsModel = {
  snapObjectDistance: 10,
  snapAngle: 10,
  constraints: SnapConstraints.SnapToObject | SnapConstraints.ShowLines,
};
// A node is created and stored in nodes array.

let node: NodeModel[] = [{
    // Position of the node
    offsetX: 250,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },  
},
{
    // Position of the node
    offsetX: 450,
    offsetY: 100,
    // Size of the node
    width: 100,
    height: 100,
    style: {
        fill: '#6BA5D7',
        strokeColor: 'white'
    },
}];

// initialize Diagram component

ReactDOM.render( < DiagramComponent id = "diagram"
        width = {
            '100%'
        }
        height = {
            '600px'
        }
        // Add node
        nodes = {
            node
        }
        snapSettings={snapSettings}
        // render initialized Diagram
        ><Inject services = {[Snapping]}/>
        </DiagramComponent>,   document.getElementById("diagram") );

<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Chart-DataLabel</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
        #diagram {
            display: block;
        }
    </style>
</head>

<body>
        <div id='diagram'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

Contents

Customize the gridlines visibility
Appearance
Line intervals
Snapping
Snap to lines
Customization of snap intervals
Snap to objects

Contents

Customize the gridlines visibility
Appearance
Line intervals
Snapping
Snap to lines
Customization of snap intervals
Snap to objects

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!