How to Set the Pattern Fill Style for Nodes in Javascript Diagram?

In Syncfusion® Javascript Diagram, you can set a desired fill color for nodes using the style fill property. However, applying pattern backgrounds directly to nodes is not achievable with the built-in node properties. This article explains how to apply pattern backgrounds to nodes using HTML type nodes, with code examples and samples.

Using HTML Type Nodes for Pattern Backgrounds

To apply a pattern background to nodes, you can utilize HTML type nodes, which allow customization beyond the built-in properties.

Define an HTML Node:

To define an HTML node set the type property of the node’s shape to HTML.
Use the nodeTemplate property to bind a custom template based on the node’s ID.
Below is an example of how to define an HTML type node:

let nodes = [
 {
   id: 'node1',
   offsetX: 100,
   offsetY: 100,
   shape: {
     type: 'HTML',
   },
 },
]

 
 // Initialize the diagram
var diagram = new ej.diagrams.Diagram({
 width: '100%',
 height: '645px',
 nodes: nodes,
 // Sets the default values of a nodes
 getNodeDefaults: function (obj) {
   // Sets the default values of a node
   obj.width = 150;
   obj.height = 100;
   return obj;
 },
 nodeTemplate:'#nodeTemplate'
});
diagram.appendTo('#diagram');

The nodeTemplate generates the node content dynamically. It applies different styles based on the id of each node.

    <script id="nodeTemplate" type="text/x-template">
     ${if(id == 'node1')}
         <div>
             <label htmlFor="fillPattern">Fill: NoFill </label>
             <div class="noFill" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node2')}
         <div>
             <label htmlFor="fillPattern">Fill: backwardDiagonal </label>
             <div class="backwardDiagonal" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node3')}
         <div>
             <label htmlFor="fillPattern">Fill: diagonalCross </label>
             <div class="diagonalCross" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node4')}
         <div>
             <label htmlFor="fillPattern">Fill: forwardDiagonal </label>
             <div class="forwardDiagonal" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node5')}
         <div>
             <label htmlFor="fillPattern">Fill: horizontalLines </label>
             <div class="horizontalLines" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node6')}
         <div>
             <label htmlFor="fillPattern">Fill: verticalLines </label>
             <div class="verticalLines" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node7')}
         <div>
             <label htmlFor="fillPattern">Fill: horzVertCross </label>
             <div class="horzVertCross" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${else if(id == 'node8')}
         <div>
             <label htmlFor="fillPattern">Fill: horzVertCross </label>
             <div class="solidColor" style="width: 100%; height: 80px; border: 5px dashed red;">
             </div>
         </div>
     ${/if}
   </script>

Adding CSS Styles for Patterns

In the above code example, we assigned different class names to the node templates based on the node’s ID. Next, we apply various pattern background styles to these nodes by defining CSS rules corresponding to the class names set in the node templates. Refer to the CSS styles below for the different patterns.

.noFill {
 background: none;
}

.backwardDiagonal {
 background: repeating-linear-gradient(135deg, transparent, transparent 5px, black 5px, black 10px);
}

.diagonalCross {
 background: repeating-linear-gradient(135deg, transparent, transparent 5px, black 5px, black 10px),
             repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px);
}

.forwardDiagonal {
 background: repeating-linear-gradient(45deg, transparent, transparent 5px, black 5px, black 10px);
}

.horizontalLines {
 background: repeating-linear-gradient(0deg, black, black 2px, transparent 2px, transparent 4px);
}

.verticalLines {
 background: repeating-linear-gradient(90deg, black, black 2px, transparent 2px, transparent 4px);
}

.horzVertCross {
 background: repeating-linear-gradient(0deg, black, black 2px, transparent 2px, transparent 4px),
             repeating-linear-gradient(90deg, black, black 2px, transparent 2px, transparent 4px);
}

.solidColor {
 background: black;
} 

The nodes are rendered dynamically based on the CSS classes assigned in the template function. This approach enables a high degree of customization, making it easy to create visually distinct nodes for your diagram.

Sample

Conclusion

I hope you enjoyed learning about how to set the pattern fill style for nodes in JavaScript Diagram.
You can refer to our JavaScript Diagram feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript Diagram example to understand how to create and manipulate data. For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls. If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!