visual Function

A function returning a visual element to render for this shape.

Example - creating a custom shape visual

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;

  function shapeVisual(data) {
    var g = new kendo.dataviz.diagram.Group({
      autoSize: true
    });
    var r = new kendo.dataviz.diagram.Circle({
      width : 100,
      height: 60,
      fill: "LimeGreen"
    });
    g.append(r);
    var fn = new kendo.dataviz.diagram.TextBlock({
      text: "State 1",
      fontSize: 16,
      x: 25,
      y: 20
    });
    g.append(fn);

    return g;
  }

  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 40,
    y: 40,
    fill: "#c0f0fc",
    visual: shapeVisual
  });
  diagram.addShape(shape);
</script>