Zooming Features from Chart

[Weng Keong Lan]

Dear Support,

Could you advice us that we would like to move the zoom-in, zoom-out, pan and reset features outside the chart to have better accessibility from the top toolbar (attached below screenshot as reference). How could we able to achieve it?
Looking forward to your advice. Thanks.

[Durga Gopalakrishnan]

Hi Weng,

Greetings from Syncfusion.

As of now, we don’t have support to display the zoom toolbars outside chart area. We suggest you to use annotations to achieve your required scenario and you can change the zoomFactor and zoomPosition values of axis while clicking the buttons. Please check with the below snippet and sample.

<ejs-chart>

   <e-chart-annotations>

       <e-chart-annotation X=x1 Y="10%" Content='<div id="ann1"><button onclick="zoomIn()"><img src=https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRjMbRzK7UwOA0PYYmuUkJgRdlCJgoFGwShiQ&usqp=CAU  style="width: 20px; height: 20px"/></button></div>' CoordinateUnits='@Syncfusion.EJ2.Charts.Units.Pixel' Region="@Syncfusion.EJ2.Charts.Regions.Chart"></e-chart-annotation>

        //…

   </e-chart-annotations>

<script>

   function zoomIn(){

        var chart = document.getElementById('container').ej2_instances[0];

        chart.primaryXAxis.zoomFactor = chart.primaryXAxis.zoomFactor - 0.1;

        chart.primaryXAxis.zoomPosition = chart.primaryXAxis.zoomPosition + 0.1;

        chart.refresh();

    }

    function zoomOut() {

        var chart = document.getElementById('container').ej2_instances[0];

        chart.primaryXAxis.zoomFactor =chart.primaryXAxis.zoomFactor - 0.2;

        chart.primaryXAxis.zoomPosition = chart.primaryXAxis.zoomPosition + 0.2;

        chart.refresh();

    }

    function reset() {

         var chart = document.getElementById('container').ej2_instances[0];

        chart.primaryXAxis.zoomFactor = 1;

        chart.primaryXAxis.zoomPosition = 0;

        chart.refresh();

    }

</script>

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Zoom1166780218.zip

Kindly revert us if you have any concerns.

Regards,

Durga Gopalakrishnan.

[Weng Keong Lan]

Dear Support, 

Thanks for your replied. Here is our finding after implemented script based on the sample codes. 

While the zoom button does something to the chart, it does not seem to zoom in as expected. As depicted in the screenshot below, upon 4 successions of clicking the "zoom in" button, the axis seems to be pushed to the left without any significant increase in size of the chart grids nor is there any significant change in gap between the x-axis items.

Also, it will be super helpful to include a function for panning around the zoomed chart.

Looking forward to your advice. Thanks.

Before:

After:
1.Chart just moving to left when clicked Zoom In.



Expectation:
1.Visibly zoomed in chart with option to pane around the chart.
2.Significantly increased gap size between x-axis items

[Durga Gopalakrishnan]

Hi Weng,

We suggest you to change the zoom position to perform panning. Since we don’t have support to place the zooming toolbars outside the chart area and its functionality, we have done a simple workaround which re-renders the chart with changed zoomFactor and zoomPosition. We have attached modified sample for your reference.

The default zoomFactor and zoomPostion value is 1 and 0. Both values are ranges from 0 to 1, based on each zooming functionality this value differs when we perform zooming in chart.

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Zooming-988914095.zip

Note : You can change the zoom factor and zoom position based on your need.

Please let us know if you have any concerns.

Regards,

Durga Gopalakrishnan.