New to Kendo UI for jQuery? Start a free 30-day trial

Stroke

configuration

Defines the stroke configuration.

stroke

Object

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 20,
    y: 20,
    fill: "#c0f0fc",
    stroke: {
      color: "#8800cc",
      dashType: "dashDot"
    }
  });
  diagram.addShape(shape);
</script>

stroke.color

String

Defines the color of the shape's stroke.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Shape with Red Stroke"
        },
        stroke: {
            color: "red",
            width: 2
        }
    }]
});
</script>

stroke.dashType

String

The dash type of the shape.

The following dash types are supported:

"dash" - a line consisting of dashes
"dashDot" - a line consisting of a repeating pattern of dash-dot
"dot" - a line consisting of dots
"longDash" - a line consisting of a repeating pattern of long-dash

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Dashed Stroke"
        },
        stroke: {
            color: "green",
            width: 2,
            dashType: "dash"
        }
    }]
});
</script>

"longDashDot" - a line consisting of a repeating pattern of long-dash-dot
"longDashDotDot" - a line consisting of a repeating pattern of long-dash-dot-dot
"solid" - a solid line

stroke.width

Number

Defines the thickness or width of the shape's stroke.

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Shape with Thick Stroke"
        },
        stroke: {
            color: "blue",
            width: 5
        }
    }]
});
</script>