Fill

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 20,
    y: 20,
    fill: {
      color: "#0000ff",
      opacity: 0.5
    },
    width: 200
  });
  diagram.addShape(shape);
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Colored Shape"
        },
        fill: {
            color: "#ff6600"
        }
    }]
});
</script>

<div id="diagram"></div>
<script>
  var Shape = kendo.dataviz.diagram.Shape;
  $("#diagram").kendoDiagram();
  var diagram = $("#diagram").data("kendoDiagram");

  var shape = new Shape({
    id: 1,
    x: 20,
    y: 20,
    fill: {
      gradient: {
        type: "radial",
        center: [0.5, 0.5],
        radius: 0.9,
        stops: [
          {
            offset: 0,
            color: "lightblue",
            opacity: 0.5
          }, {
            offset: 0.5,
            color: "purple",
            opacity: 0.8
          }
        ]
      }
    }
  });
  diagram.addShape(shape);
</script>

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Semi-transparent Shape"
        },
        fill: {
            color: "red",
            opacity: 0.5
        }
    }]
});
</script>