New to Kendo UI for jQuery? Start a free 30-day trial

Fill.gradient

configuration

Defines the gradient fill of the shape.

fill.gradient

Object

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

fill.gradient.center

Array

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.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      gradient: {
        type: "radial",
        center: [0.5, 0.3],
        stops: [
          { color: "#ff6358", offset: 0 },
          { color: "#ffd246", offset: 1 }
        ]
      }
    }
  }]
});
</script>

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.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      gradient: {
        type: "linear",
        start: [0, 0],
        end: [0.8, 0.8],
        stops: [
          { color: "#ff6358", offset: 0 },
          { color: "#ffd246", offset: 1 }
        ]
      }
    }
  }]
});
</script>

fill.gradient.radius

Number

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

Default: 1

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      gradient: {
        type: "radial",
        radius: 0.8,
        stops: [
          { color: "#ff6358", offset: 0 },
          { color: "#ffd246", offset: 1 }
        ]
      }
    }
  }]
});
</script>

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.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      gradient: {
        type: "linear",
        start: [0, 0],
        end: [1, 1],
        stops: [
          { color: "#ff6358", offset: 0 },
          { color: "#ffd246", offset: 1 }
        ]
      }
    }
  }]
});
</script>

fill.gradient.stops

Array

The array of gradient color stops.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
  shapes: [{
    type: "circle",
    x: 100,
    y: 100,
    fill: {
      gradient: {
        type: "linear",
        stops: [
          { color: "#ff6358", offset: 0, opacity: 1 },
          { color: "#ffd246", offset: 0.5, opacity: 0.8 },
          { color: "#28b4c8", offset: 1, opacity: 0.6 }
        ]
      }
    }
  }]
});
</script>

fill.gradient.type

String

The type of the gradient. Supported values are:

linear
radial

Default: "linear"

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

Related Members