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

Fill.gradient.stops

configuration

The array of gradient color stops.

fill.gradient.stops

Array

<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.stops.color

String

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.

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

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

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

fill.gradient.stops.opacity

Number

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

<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.5 },
          { color: "#28b4c8", offset: 1, opacity: 0.2 }
        ]
      }
    }
  }]
});
</script>