stroke Object

Defines the stroke configuration.

Example - configuring the stroke

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");
  var shape1 = diagram.addShape( new Shape({x:100, y: 100}));
  var shape2 = diagram.addShape( new Shape({x:300, y: 100}));

  var connection = new kendo.dataviz.diagram.Connection(shape1, shape2, {
    stroke: {
      color: "red",
      width: 2,
      dashType: "dash"
    },
    selectable: false
  });

  diagram.addConnection(connection);
</script>

stroke.color String

Defines the stroke or line color of the connection.

stroke.dashType String

Specifies the stroke dash type.

The following dash types are supported:

  • "dash" - A line that consists of dashes
  • "dashDot" - A line that consists of a repeating pattern of dash-dot
  • "dot" - A line that consists of dots
  • "longDash" - A line that consists of a repeating pattern of long-dash
  • "longDashDot" - A line that consists of a repeating pattern of long-dash-dot
  • "longDashDotDot" - A line that consists of a repeating pattern of long-dash-dot-dot
  • "solid" - A solid line

stroke.width Number

Defines the stroke width of the connection.

In this article