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

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: [{
        id: "1",
        content: {
            text: "Radial Gradient"
        },
        fill: {
            gradient: {
                type: "radial",
                center: [0.5, 0.5],
                radius: 0.8,
                stops: [
                    { offset: 0, color: "yellow" },
                    { offset: 1, color: "orange" }
                ]
            }
        }
    }]
});
</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: [{
        id: "1",
        content: {
            text: "Diagonal Gradient"
        },
        fill: {
            gradient: {
                type: "linear",
                start: [0, 0],
                end: [1, 1],
                stops: [
                    { offset: 0, color: "purple" },
                    { offset: 1, color: "pink" }
                ]
            }
        }
    }]
});
</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: [{
        id: "1",
        content: {
            text: "Small Gradient Radius"
        },
        fill: {
            gradient: {
                type: "radial",
                center: [0.5, 0.5],
                radius: 0.3,
                stops: [
                    { offset: 0, color: "white" },
                    { offset: 1, color: "black" }
                ]
            }
        }
    }]
});
</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: [{
        id: "1",
        content: {
            text: "Linear Gradient Start"
        },
        fill: {
            gradient: {
                type: "linear",
                start: [0, 0],
                end: [1, 0],
                stops: [
                    { offset: 0, color: "green" },
                    { offset: 1, color: "lime" }
                ]
            }
        }
    }]
});
</script>

fill.gradient.stops

Array

The array of gradient color stops.

<div id="diagram"></div>
<script>
$("#diagram").kendoDiagram({
    shapes: [{
        id: "1",
        content: {
            text: "Multi-Stop Gradient"
        },
        fill: {
            gradient: {
                type: "linear",
                start: [0, 0],
                end: [1, 0],
                stops: [
                    { offset: 0, color: "red" },
                    { offset: 0.3, color: "yellow" },
                    { offset: 0.7, color: "green" },
                    { offset: 1, color: "blue" }
                ]
            }
        }
    }]
});
</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: [{
        id: "1",
        content: {
            text: "Linear Gradient"
        },
        fill: {
            gradient: {
                type: "linear",
                start: [0, 0],
                end: [1, 1],
                stops: [
                    { offset: 0, color: "red" },
                    { offset: 1, color: "blue" }
                ]
            }
        }
    }]
});
</script>

Related Members