shapeDefaults.visual Function

A function that returns a visual element to render for a given shape. The following primitives can be used to construct a composite visual:

• Circle
• Rectangle
• Path
• Line
• Polyline
• TextBlock
• Image
• Layout

The origin of the visual bounding box has to be (0, 0). If you have a complex path which coordinates cannot be easily adjusted, then position the element as demonstrated in this example.

Example - declaring a custom visual for Diagram shapes

<div id="diagram"></div>
<script>
    var diagram = kendo.dataviz.diagram;
    var getVisual = function(data) {
        var g = new diagram.Group({
            autoSize: true
        });
        var r = new diagram.Circle({
            width : 100,
            height: 60,
            fill: "LimeGreen"
        });
        g.append(r);
        var fn = new diagram.TextBlock({
            text: data.dataItem.name,
            fontSize: 16,
            x: 25,
            y: 20
        });
        g.append(fn);

        return g;
    };

    $("#diagram").kendoDiagram({
        dataSource: [{
            "name" : "Telerik",
            "items": [
                {"name": "Kendo"},
                {"name": "Icenium"}
            ]
        }],
        shapeDefaults: {
            visual: getVisual
        }
    });

    $("#diagram").getKendoDiagram().layout();
</script>