# Zoom to Predefined Diagram Points

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Diagram for jQuery</td>
 </tr>
 <tr>
  <td>Operating System</td>
  <td>Windows 10 64bit</td>
 </tr>
 <tr>
  <td>Visual Studio Version</td>
  <td>Visual Studio 2017</td>
 </tr>
 <tr>
  <td>Preferred Language</td>
  <td>JavaScript</td>
 </tr>
</table>

## Description

How can I zoom the Kendo UI for jQuery Diagram to a predefined point?

## Solution

The following example demonstrates how to zoom the Diagram to a predefined point.

```dojo

    <button id="zoomIn">+</button>
    <button id="zoomOut">-</button>

    <div id="diagram"></div>

    <script>
      $(document).ready(function () {
        $("#diagram").kendoDiagram();

        var diagram = $("#diagram").data("kendoDiagram");

        var diagramNS = kendo.dataviz.diagram;
        var shape1 = diagram.addShape(new diagramNS.Shape({x: 120, y: 120, fill: "red", content: { text: "Test Shape" }}));

        $("#zoomIn").on("click", function () {
          var zoom = $("#diagram").data("kendoDiagram").zoom();
          $("#diagram").data("kendoDiagram").zoom(zoom + 0.1,
                                                  {point: new diagramNS.Point(100, 100)});
        });

        $("#zoomOut").on("click", function () {
          var zoom = $("#diagram").data("kendoDiagram").zoom();
          $("#diagram").data("kendoDiagram").zoom(zoom - 0.1,
                                                  {point: new diagramNS.Point(100, 100)});
        });
      });
    </script>

```

## See Also

* [Basic Usage of the Diagram (Demo)](https://demos.telerik.com/kendo-ui/diagram/index)
* [JavaScript API Reference of the Diagram](https://www.telerik.com/kendo-jquery-ui/documentation/api/dataviz/ui/diagram)
* [Implement Local Data Editing](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/local-data-editing)
* [Render External Content in Shapes](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/external-content-in-shapes)
* [Wrap Text](https://www.telerik.com/kendo-jquery-ui/documentation/knowledge-base/text-wrapping)