shapeVisual Object

    The visual element representing the shape.

    This is either the result returned from shape.visual or a predefined type.

    Example - accessing the shape visual element

    Open In Dojo
    <div id="diagram"></div>
    <script>
      var shapesDataSource = {
        data: [
          { id: 1, JobTitle: "Job 1", Color: "red" },
          { id: 2, JobTitle: "Job 2", Color: "blue" },
          { id: 3, JobTitle: "Job 3", Color: "green" }
        ]
      };
    
      var connectionsDataSource = {
        data: [
          { id: 1, from: 1, to: 2},
          { id: 2, from: 1, to: 3},
        ]
      };
    
      var diagram = $("#diagram").kendoDiagram({
        dataSource: shapesDataSource,
        connectionsDataSource: connectionsDataSource,
        layout: {
          type: "tree"
        },
        shapeDefaults: {
          content: {
            template: "#= dataItem.JobTitle #"
          }
        }
      }).getKendoDiagram();
    /* The result can be observed in the DevTools(F12) console of the browser. */
      console.log(diagram.shapes[0].shapeVisual);
    </script>
    In this article