zoom

Gets or sets the current zoom level of the diagram.

Parameters

zoom Number

The zoom factor.

point kendo.dataviz.diagram.Point

The point to zoom into or out of.

Returns

Number The current zoom level

Example - zoom Diagram dynamically

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

Example - zoom Diagram dynamically to point

  <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>
In this article
zoom
Not finding the help you need?
Contact Support