Defines the fill options of the shape.

Example - customizing shape background

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

Defines the fill color of the shape.

Defines the fill opacity of the shape.

Defines the gradient fill of the shape.

Example - Creating a shape with gradient background

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

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