Page Settings in React Diagram Component
21 Oct 202524 minutes to read
Page settings allow customization of the appearance, size, and orientation of the diagram page.
To customize the diagram page settings, insert page breaks, display multiple pages, and change the orientation of the canvas in the EJ2 React Diagram, refer to the video link below.
Page Size and Appearance
The diagram page dimensions are controlled through the width and height properties in page settings. The page appearance can be customized using the background property, which includes options for setting the background color and other visual properties. The margin property defines spacing around the page content.
For comprehensive details on all available properties, refer to the Page Settings
The following example shows the customization of page settings.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connector = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
}, {
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey',
},
// Sets the width for the Page
width: 300,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10,
right: 10,
},
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let connector: ConnectorModel[] = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
}, {
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node3'
}]
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey',
},
// Sets the width for the Page
width: 300,
// Sets the height for the Page
height: 300,
// Sets the space to be left between an annotation and its parent node/connector
margin: {
left: 10,
top: 10,
bottom: 10,
right: 10
},
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Set Background Image
A background image can be attached to the page by using the source property of background . The scale property adjusts how the background image stretches, while the align property determines the image positioning within the diagram page boundaries.
The following code illustrates how to set background image to the diagram page.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'}
// Defines the pageSettings for the diagram
pageSettings={{
orientation: 'Landscape',
showPageBreaks: true,
// Defines the background Image source
background: {
source: 'https://www.w3schools.com/images/w3schools_green.jpg',
// Defines the scale values for the background image
scale: 'Meet',
// Defines the align values for the background image
align: 'XMinYMin'
},
width: 300,
height: 300,
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent
} from "@syncfusion/ej2-react-diagrams";
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
// Defines the pageSettings for the diagram
pageSettings = {
{
orientation: 'Landscape',
showPageBreaks: true,
// Defines the background Image source
background: {
source: 'https://www.w3schools.com/images/w3schools_green.jpg',
// Defines the scale values for the background image
scale: 'Meet',
// Defines the align values for the background image
align: 'XMinYMin'
},
width: 300,
height: 300,
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Page Orientation
The diagram supports two page orientations:
- Landscape: Wider than tall (default orientation).
- Portrait: Taller than wide.
When the orientation changes, the diagram automatically swaps the width and height values to maintain the specified page dimensions. For example, if a page is configured with width: 800 and height: 600 in landscape mode, switching to portrait orientation will result in width: 600 and height: 800.
The following example demonstrates how orientation affects page dimensions by switching from the default landscape to portrait mode.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connector = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
}, {
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node2'
}]
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey',
},
// Sets the width for the Page
width: 500,
// Sets the height for the Page
height: 300,
//Sets the orientation for the page
orientation: 'Portrait',
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let connector: ConnectorModel[] = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
}, {
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node2'
}]
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the Page Break for diagram
showPageBreaks: true,
// Defines the background color and image of diagram
background: {
color: 'grey',
},
// Sets the width for the Page
width: 500,
// Sets the height for the Page
height: 300,
//Sets the orientation for the page
orientation: 'Portrait'
}}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Multiple Page and Page Breaks
The diagram can extend across multiple pages when the content exceeds the defined page boundaries. When multiple pages are enabled, the total canvas size automatically expands in increments of the specified page width and height to accommodate all diagram elements. Page breaks provide visual indicators showing where one page ends and another begins, which is particularly useful for print layout planning.
The multiplePage and showPageBreak properties in page settings control the ability to enable multiple pages and display page break lines, respectively.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connector = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node2'
}]
}
];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the Multiple page for diagram
multiplePage: true,
// Sets the Page Break for diagram
showPageBreaks: true,
width: 300,
height: 300,
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let connector: ConnectorModel[] = [{
id: 'connector1',
sourceID: 'node1',
targetID: 'node2',
}];
let node: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 100,
offsetY: 100,
annotations: [{
content: 'Node1'
}]
},
{
id: 'node2',
width: 100,
height: 100,
offsetX: 300,
offsetY: 350,
annotations: [{
content: 'Node2'
}]
}
];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
connectors={connector}
// Defines the pageSettings for the diagram
pageSettings = {
{
// Sets the Multiple page for diagram
multiplePage: true,
// Sets the Page Break for diagram
showPageBreaks: true,
width: 300,
height: 300,
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);The color of the page break lines can be customized by overriding the styles of the .e-diagram-page-break class. For more details refer to CSS customization
Boundary Constraints
The appearance of page break lines can be customized by overriding the styles of the .e-diagram-page-break CSS class. For detailed styling options, refer to the boundaryConstraints property in page settings.
The three types of boundary constraints are:
- Infinity: Elements can be moved without any boundary restrictions.
- Diagram: Elements are constrained within the overall diagram area.
- Page: Elements are restricted to the defined page boundaries.
For detailed information about each constraint type and their behavior, refer to the Boundary Constraints.
The following example shows how to configure boundary constraints to restrict element movement within specific boundaries.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let connector = [{
id: 'connector1',
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 100
}
}];
let node = [{
id: 'node1',
width: 150,
height: 100,
offsetX: 100,
offsetY: 100,
}, {
id: 'node2',
width: 80,
height: 130,
offsetX: 200,
offsetY: 200,
}, {
id: 'node3',
width: 100,
height: 75,
offsetX: 300,
offsetY: 350,
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node} connectors={connector}
// Defines the pageSettings for the diagram
pageSettings={{
// Sets the BoundaryConstraints to page
boundaryConstraints: 'Page',
background: {
color: 'grey'
},
width: 400,
height: 400,
showPageBreaks: true,
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
ConnectorModel,
NodeModel,
BoundaryConstraints
} from "@syncfusion/ej2-react-diagrams";
let connector: ConnectorModel[] = [{
id: 'connector1',
sourcePoint: {
x: 300,
y: 100
},
targetPoint: {
x: 400,
y: 100
}
}];
let node: NodeModel[] = [{
id: 'node1',
width: 150,
height: 100,
offsetX: 100,
offsetY: 100,
}, {
id: 'node2',
width: 80,
height: 130,
offsetX: 200,
offsetY: 200,
}, {
id: 'node3',
width: 100,
height: 75,
offsetX: 300,
offsetY: 350,
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
connectors={connector}
// Defines the pageSettings for the diagram
pageSettings = {
{
// Sets the BoundaryConstraints to page
boundaryConstraints: 'Page',
background: {
color: 'grey'
},
width: 400,
height: 400,
showPageBreaks: true,
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);Fit Options
The fitOptions in page settings control how diagram content is fitted within the diagram page. The canFit property within fitOptions centers the content within the viewport during diagram rendering. Additionally, the region property specifies whether to fit the page or the content to the center of the viewport. Choosing CustomBounds for the region allows fitting custom bounds within the diagram by defining them in the customBounds property of fitOptions. The canZoomIn property enables zooming in to fit smaller content within the viewport. Additionally, the margin property defines the space around the fitted content within the viewport, while the mode property sets the fitting mode, typically defaulting to ‘Page’ but also offering options like ‘Width’ and ‘Height’ for specific dimension constraints.
The following example demonstrates the configuration and usage of fit options for automatic content positioning.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { DiagramComponent } from "@syncfusion/ej2-react-diagrams";
let node = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: 'Node fits at the center of view port' }],
}];
function App() {
return (<DiagramComponent id="container" width={'100%'} height={'600px'} nodes={node}
// Defines the pageSettings for the diagram
pageSettings={{
width: 500,
height: 500,
background: { color: 'grey' },
fitOptions: {
// Fits the content to the center of the viewport
canFit: true,
// Allows zooming in to fit smaller content
canZoomIn: true,
// Specifies the region to fit to the center
region: 'Content',
// Specifies the mode of fitOptions
mode: 'Page',
// Defines the margin around the fitted content
margin: { left: 50, right: 50, top: 50, bottom: 50 },
}
}}/>);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);import * as React from "react";
import * as ReactDOM from "react-dom";
import {
DiagramComponent,
NodeModel
} from "@syncfusion/ej2-react-diagrams";
let node: NodeModel[] = [{
id: 'node1',
width: 100,
height: 100,
offsetX: 200,
offsetY: 200,
annotations: [{ content: 'Node fits at the center of view port' }],
}];
function App() {
return (
<DiagramComponent
id="container"
width={'100%'}
height={'600px'}
nodes={node}
// Defines the pageSettings for the diagram
pageSettings = {
{
width: 500,
height: 500,
background: { color: 'grey' },
fitOptions: {
// Fits the content to the center of the viewport
canFit: true,
// Allows zooming in to fit smaller content
canZoomIn: true,
// Specifies the region to fit to the center
region: 'Content',
// Specifies the mode of fitOptions
mode: 'Page',
// Defines the margin around the fitted content
margin: { left: 50, right: 50, top: 50, bottom: 50 },
}
}
}
/>
);
}
const root = ReactDOM.createRoot(document.getElementById('diagram'));
root.render(<App />);