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:

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>
    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"
        var fn = new diagram.TextBlock({
            fontSize: 16,
            x: 25,
            y: 20

        return g;

        dataSource: [{
            "name" : "Telerik",
            "items": [
                {"name": "Kendo"},
                {"name": "Icenium"}
        shapeDefaults: {
            visual: getVisual

In this article