Articles in this section
Category / Section

How to render a port using PathData?

1 min read

Render a custom shaped port using PathData

In jQuery Diagram you can create port of complex shapes by assigning path string to port’s pathData property. For more information about port, refer to Port.

The following code illustrates how to create a star shaped port using pathData property and add it to nodes port array.


var node = {
 ports: [{
  name: "port1",
  offset: {s: 0, y: 0.5},
  fillColor: "yellow"
  shape: ej.datavisualization.Diagram.PortShapes.Path,
  pathData: "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z ",
  visibility: ej.datavisualization.Diagram.PortVisibility.Visible



Node node = new Node();
Port port = new Port();
port.Name = "port1";
port.Offset = new DiagramPoint(0f, 0.5f);
port.FillColor = "yellow";
port.Shape = PortShapes.Path;
port.PathData = "M540.3643,137.9336L546.7973,159.7016L570.3633,159.7296L550.7723,171.9366L558.9053,194.9966L540.3643,179.4996L521.8223,194.9966L529.9553,171.9366L510.3633,159.7296L533.9313,159.7016L540.3643,137.9336z ";
port.Visibility = PortVisibility.Visible;


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