How to apply zooming in 3D Charts using scrollbar?

7 mins read

This article describes how to enable zoom functionality in the SfChart3D control using a ScrollBar.

The Maximum, Minimum properties, and the LabelCreated event of the NumericalAxis3D are essential for implementing zooming. Follow these steps to achieve the desired functionality.

Step 1: Create ScrollBars and Register Event

Create ScrollBars to obtain the position and factor needed for zooming, and register the ValueChanged event.

<!-- ZoomFactor -->
<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
  <TextBlock Text="X-Axis ZoomFactor    :"  VerticalAlignment="Center"/>
  <ScrollBar Height="15" Grid.Column="1" 
             Orientation="Horizontal"    
             Margin="35,5,10,5" 
             x:Name="zoomFactor" 
             Minimum="0"
             Maximum="1" Value="1"
             ValueChanged="zoomFactor_ValueChanged"/>
</Grid>
<!-- ZoomPosition -->
<Grid>
 <Grid.ColumnDefinitions>
  <ColumnDefinition Width="Auto"/>
  <ColumnDefinition/>
 </Grid.ColumnDefinitions>
  <TextBlock Text="X-Axis ZoomPosition :"  VerticalAlignment="Center"/>
  <ScrollBar Height="15" Grid.Column="1" 
             Orientation="Horizontal" 
             x:Name="zoomPosition" 
             Margin="35,5,10,5" 
             Minimum="0" 
             Maximum="1"
             ValueChanged="zoomPosition_ValueChanged"/>
</Grid>

Step 2: Update Axis Properties

Update the Maximum and Minimum properties of the PrimaryAxis based on ScrollBar values.

//Calculating the Maximum and Minimum properties of Axis.        
private void UpdateRange()
{
 if (zoomPosition != null && zoomFactor != null)
 {
  double start = minimum + zoomPosition.Value * maximum;
  double end = start + zoomFactor.Value * maximum;
 
  if (end > maximum)
  {
   start = start - (end - maximum);
   end = maximum;
  }
 
  if (start < minimum)
    start = minimum;
 
  xAxis.Minimum = start;
  xAxis.Maximum = end;
 }
}

Step 3: Update LabelContent Property

Update the LabelContent property based on the value of the Position property in the LabelCreated event.

<chart:SfChart3D.PrimaryAxis>
 <chart:NumericalAxis3D  Interval="1" EnableAutoIntervalOnZooming="False"   
                         LabelCreated="xAxis_LabelCreated" 
                         LabelRotationAngle="-90" 
                         x:Name="xAxis"/>
</chart:SfChart3D.PrimaryAxis>

// Update LabelContent property of Position of AxisLabel
private void xAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
{
 if (e.AxisLabel.Position - (int)e.AxisLabel.Position < 0.5)
 {
  int position = (int)Math.Floor(e.AxisLabel.Position);
 
  if (position < months.Count() && position >= 0)
   e.AxisLabel.LabelContent = months[position].ToString();
  else
   e.AxisLabel.LabelContent = "";
 }
 else
 {
  int position = (int)Math.Ceiling(e.AxisLabel.Position);
 
  if (position < months.Count() && position >= 0)
   e.AxisLabel.LabelContent = months[position].ToString();
  else
   e.AxisLabel.LabelContent = "";
 }
}

For a detailed view, explore the sample on GitHub.

Refer to this KB article, for applying default zoom and pan position in SfChart.

How to apply zooming in 3D Charts using scrollbar?

Access denied