Articles in this section
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";

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment