Category / Section
How to set the borders for a node with different thickness on each sides?
1 min read
Set Node borders individually
To draw a border for a node, you can use rectangle shape with the border width and color set. But the borderWidth holds a single value that is applied to all sides of the rectangle. There is no out-of-box support to draw different border width on each sides of a rectangle.
To overcome this, you can embed a SVG element with multiple lines into the node by using native node. You can set a different border style (stroke-width) for each line. The following code explains how to create a native node.
JS
//dependency scripts
<script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script>
<script id="svgTemplate" type="text/x-jsrender">
<g>
<rect width="280" height="280"
style="fill:blue;stroke-width:0" />
<polyline points="0,0 280,0"
style="fill:white;stroke:red;stroke-width:4"/>
<polyline points="0,0 0,280"
style="fill:white;stroke:red;stroke-width:0"/>
<polyline points="280,0 280,280"
style="fill:white;stroke:red;stroke-width:2"/>
<polyline points="0,280 280,280"
style="fill:white;stroke:red;stroke-width:3"/>
</g>
</script>
var node = {
type: ej.datavisualization.Diagram.Shapes.Native,
templateId: "svgTemplate",
}
EJASP
ASPX
//dependency scripts <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> <script id="svgTemplate" type="text/x-jsrender"> <g> <rect width="280" height="280" style="fill:blue;stroke-width:0" /> <polyline points="0,0 280,0" style="fill:white;stroke:red;stroke-width:4"/> <polyline points="0,0 0,280" style="fill:white;stroke:red;stroke-width:0"/> <polyline points="280,0 280,280" style="fill:white;stroke:red;stroke-width:2"/> <polyline points="0,280 280,280" style="fill:white;stroke:red;stroke-width:3"/> </g> </script>
ASPX.CS
NativeNode node = new NativeNode(); node.TemplateId = "svgTemplate";
EJMVC
CSHTML
//dependency scripts <script src="http://borismoore.github.io/jsrender/jsrender.min.js"></script> <script id="svgTemplate" type="text/x-jsrender"> <g> <rect width="280" height="280" style="fill:blue;stroke-width:0" /> <polyline points="0,0 280,0" style="fill:white;stroke:red;stroke-width:4"/> <polyline points="0,0 0,280" style="fill:white;stroke:red;stroke-width:0"/> <polyline points="280,0 280,280" style="fill:white;stroke:red;stroke-width:2"/> <polyline points="0,280 280,280" style="fill:white;stroke:red;stroke-width:3"/> </g> </script>
Controller
NativeNode node = new NativeNode(); node.TemplateId = "svgTemplate";