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

Zoom

methods

Gets or sets the current zoom level of the diagram.

zoom

Parameters:zoomNumber

The zoom factor.

pointkendo.dataviz.diagram.Point

The point to zoom into or out of.

Returns:Number

The current zoom level

<button id="zoomBtn">Zoom Diagram</button>
<div id="diagram"></div>
<script>
  $("#zoomBtn").on("click", function(){
    var diagram = $("#diagram").getKendoDiagram();
    diagram.zoom(1.5);
  });
  $("#diagram").kendoDiagram({
    shapes: [{
      id: "1",
      x: 100,
      y: 20
    }, {
      id: "2",
      x: 350,
      y: 20
    }, {
      id: "3",
      x: 250,
      y: 200
    }],
    connections: [{
      from: "1",
      to: "2"
    },{
      from: "2",
      to: "3"
    }],
    connectionDefaults: {
      endCap: "ArrowEnd"
    }
  });
</script>

  <button id="btn">Zoom Diagram</button>
<div id="diagram"></div>
<script>
  $("#btn").on("click", function () {
    var diagram = $("#diagram").getKendoDiagram();
    var point = new kendo.dataviz.diagram.Point(100, 100);
    diagram.zoom(2.5, { point: point });
  });

  $("#diagram").kendoDiagram({
    shapes: [
      {
        id: "1",
        x: 70,
        y: 120,
        fill: {
          color: "#0000ff",
          opacity: 0.5,
        },
        width: 140,
        height: 80,
      },
    ],
  });
</script>