shapeDefaults.fill String|Object

Defines the fill options of the shape. Use these settings to apply a single-color or a gradient background to all shapes in the Diagram.

Example - applying a custom color to all Diagram shapes

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      fill: {
        color: "red",
        opacity: 0.5
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.fill.color String

Defines the fill color of the shape.

shapeDefaults.fill.opacity Number (default: 1)

Defines the fill opacity of the shape.

shapeDefaults.fill.gradient Object

Defines the gradient fill of the shape.

Example - providing a custom gradient background to Diagram shapes

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    layout: "tree",
    shapeDefaults: {
      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
            }
          ]
        }
      }
    },
    shapes: [{
      id: "1",
      content: {
        text: "Monday"
      }
    }, {
      id: "2",
      content: {
        text: "Tuesday"
      }
    }, {
      id: "3",
      content: {
        text: "Wednesday"
      }
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

shapeDefaults.fill.gradient.type String (default: "linear")

The type of the gradient. The supported values are:

• linear
• radial

shapeDefaults.fill.gradient.center Array

The center of the radial gradient.

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

shapeDefaults.fill.gradient.radius Number (default: 1)

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

shapeDefaults.fill.gradient.start Array

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.

shapeDefaults.fill.gradient.end Array

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.

shapeDefaults.fill.gradient.stops Array

The array of gradient color stops.

shapeDefaults.fill.gradient.stops.offset Number

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

shapeDefaults.fill.gradient.stops.color String

The color in any of the following formats:

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

shapeDefaults.fill.gradient.stops.opacity Number

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