zoomStart

Fired when the user starts changing the diagram zoom level.

Event Data

e.point kendo.dataviz.diagram.Point

The zoom center.

e.sender kendo.dataviz.ui.Diagram

The widget instance which fired the event.

e.zoom Number

The current zoom level.

Example - handling the zoomStart event

<div id="diagram"></div>
<script>
  $("#diagram").kendoDiagram({
    shapes:[
      {
        id:"1",
        content:{
          text: "State 1"
        },
        x: 20,
        y: 20
      },
      {
        id:"2",
        content: {
          text: "State 2"
        },
        x: 160,
        y: 20
      }
    ],
    connections:[
      {
        from: "1",
        to: "2"
      }
    ],
    zoomStart: onZoomStart
  });

  function onZoomStart(e){
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("Zoom level changed to: " + e.zoom);
  }
</script>
In this article