We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Is there a way to zoom out beyond the bounds of data?

I'm wondering if there is a way to zoom out beyond the bound of data with pinch gesture in a SfChart which has a NumericalAxis as secondary axis and a DateTimeAxis as primary axis.

1 Reply

MK Muneesh Kumar G Syncfusion Team August 29, 2019 08:56 AM UTC

Hi Fernando, 
  
Greetings from Syncfusion.  
 
We have achieved your requirement by changing the Minimum and Maximum values for axis in ZoomDelta event when we zoom beyond the initial range of data. If you want to reset the initial range during double tap means, you can store the axis initial range in ActualRangeChanged event and reset it in ResetZoom event. Please refer the below code. 
  
Code snippet: 
private void DateTimeAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 
{ 
    if (isPrimaryLoadTime) 
    { 
        if (Device.RuntimePlatform == Device.UWP) 
        { 
            initialPrimaryMinimum = Convert.ToDateTime(e.ActualMinimum).ToOADate(); 
            initialPrimaryMaximum = Convert.ToDateTime(e.ActualMaximum).ToOADate(); 
        } 
        else 
        { 
            initialPrimaryMinimum = (double)e.ActualMinimum; 
            initialPrimaryMaximum = (double)e.ActualMaximum; 
        } 
  
        isPrimaryLoadTime = false; 
    } 
} 
  
private void NumericalAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e) 
{ 
    if (isSecondaryLoadTime) 
    { 
        initialSecondaryMinimum = (double)e.ActualMinimum; 
        initialSecondaryMaximum = (double)e.ActualMaximum; 
        isSecondaryLoadTime = false; 
    } 
} 
  
private void Chart_ZoomDelta(object sender, Syncfusion.SfChart.XForms.ChartZoomDeltaEventArgs e) 
{ 
    //if you want to zoom beyond DateTimeAxis, you can add this code 
    if (e.Axis is DateTimeAxis) 
    { 
        if (e.PreviousZoomFactor == 1 && e.CurrentZoomFactor == 1) 
        { 
            double interval = 0; 
            if (dateTimeAxis.VisibleLabels.Count > 2) 
            { 
                var data = dateTimeAxis.VisibleLabels; 
                interval = data[1].Position - data[0].Position; 
            } 
  
            dateTimeAxis.Minimum = DateTime.FromOADate(dateTimeAxis.VisibleMinimum - interval); // subtract the value as you want to decrease the range during zoom out 
            dateTimeAxis.Maximum = DateTime.FromOADate(dateTimeAxis.VisibleMaximum + interval); // add the value as you want to increase the range during zoom out 
        } 
    } 
    //if you want to zoom beyond NumericalAxis, you can add this code 
    else if (e.Axis is NumericalAxis) 
    { 
        if (e.PreviousZoomFactor == 1 && e.CurrentZoomFactor == 1) 
        { 
            double interval = 0; 
            if (numericalAxis.VisibleLabels.Count > 2) 
            { 
                var data = numericalAxis.VisibleLabels; 
                interval = data[1].Position - data[0].Position; 
            } 
  
            numericalAxis.Minimum = numericalAxis.VisibleMinimum - interval; 
            numericalAxis.Maximum = numericalAxis.VisibleMaximum + interval; 
        } 
    } 
} 
  
private void Chart_ResetZoom(object sender, ChartResetZoomEventArgs e) 
{ 
    dateTimeAxis.Minimum = DateTime.FromOADate(initialPrimaryMinimum); 
    dateTimeAxis.Maximum = DateTime.FromOADate(initialPrimaryMaximum); 
    numericalAxis.Minimum = initialSecondaryMinimum; 
    numericalAxis.Maximum = initialSecondaryMaximum; 
} 
  
  
Note – You can enable the EnableDirectionalZooming property to zoom the chart based on pinch gesture direction 
  
UG links: 
 
Regards,  
Muneesh Kumar G 
 


Loader.
Live Chat Icon For mobile
Up arrow icon