Defines the fill options of the circle.

Example - setting the Circle fill options

<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>

Defines the fill color of the circle.

Defines the fill opacity of the circle.

Defines the gradient fill of the shape.

Example - setting a gradient 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,
      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>

The type of the gradient. Supported values are:

• linear
• radial

The center of the radial gradient.

Coordinates are relative to the shape bounding box. For example [0, 0] is top left and [1, 1] is bottom right.

The radius of the radial gradient relative to the shape bounding box.

The start point of the linear gradient.

Coordinates are relative to the shape bounding box. For example [0, 0] is top left and [1, 1] is bottom right.

The end point of the linear gradient.

Coordinates are relative to the shape bounding box. For example [0, 0] is top left and [1, 1] is bottom right.

The array of gradient color stops.

The stop offset from the start of the element. Ranges from 0 (start of gradient) to 1 (end of gradient).

The color in any of the following formats.

| Format | Description | --- | --- | --- | red | Basic or Extended CSS Color name | #ff0000 | Hex RGB value | rgb(255, 0, 0) | RGB value

Specifying 'none', 'transparent' or '' (empty string) will clear the fill.

The fill opacity. Ranges from 0 (completely transparent) to 1 (completely opaque).