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

ShapeDefaults.center

configuration

Defines the center position of the shape. Applicable for the circle shape.

shapeDefaults.center

Object

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      type: "circle",
      center: { x: 100, y: 100 },
      radius: 40,
      fill: { color: "lightgreen" }
    },
    shapes: [
      { content: { text: "Circle" } }
    ]
  });
</script>

shapeDefaults.center.x

Number

The x-coordinate of the center.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      type: "circle",
      center: { x: 150, y: 100 },
      radius: 30,
      fill: { color: "orange" }
    },
    shapes: [
      { content: { text: "Centered" } }
    ]
  });
</script>

shapeDefaults.center.y

Number

The y-coordinate of the center.

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapeDefaults: {
      type: "circle",
      center: { x: 100, y: 150 },
      radius: 35,
      fill: { color: "purple" }
    },
    shapes: [
      { content: { text: "Circle" } }
    ]
  });
</script>