Fill

<div id="diagram"></div>
<script>
  var diagram = kendo.dataviz.diagram;
  function getVisual(data) {
    var g = new diagram.Group({
      autoSize: true
    });
    var r = new diagram.Circle({
      center: {x: 40, y: 40},
      radius: 40
    });
    g.append(r);

    return g;
  };

  $("#diagram").kendoDiagram({
    layout: "tree",
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      visual: getVisual
    }]
  });
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      color: "#ff6358"
    }
  }]
});
</script>

<div id="diagram"></div>
<script>
  var diagram = kendo.dataviz.diagram;
  function getVisual(data) {
    var g = new diagram.Group({
      autoSize: true
    });
    var r = new diagram.Circle({
      center: {x: 40, y: 40},
      radius: 40,
      fill: {
        gradient: {
          type: "linear",
          stops: [{
            color: "green",
            offset: 0,
            opacity: 0.5
          }, {
            color: "yellow",
            offset: 1,
            opacity: 1
          }]
        }
      }
    });
    g.append(r);

    return g;
  };

  $("#diagram").kendoDiagram({
    layout: "tree",
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      },
      visual: getVisual
    }]
  });
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      color: "#ff6358",
      opacity: 0.5
    }
  }]
});
</script>