Zooming in Blazor Stock Chart Component

29 Sep 202315 minutes to read

Enable zooming

The stock chart can be zoomed in three different ways.

Selection - By setting EnableSelectionZooming property to true in StockChartZoomSettings, the stock chart can be zoomed using the rubber band selection.
Mouse Wheel - By setting EnableMouseWheelZooming property to true in StockChartZoomSettings, the stock chart can be zoomed-in and zoomed-out by scrolling the mouse wheel.
Pinch - By setting EnablePinchZooming property to true in StockChartZoomSettings, the stock chart can be zoomed through pinch gesture in touch enabled devices.

NOTE

Pinch zooming is only usable in browsers that support multi-touch gestures.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true" EnableSelectionZooming="true"></StockChartZoomSettings>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
    </SfStockChart>
}   

@code {
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }   
    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Zooming in Blazor Stock Chart

A zooming toolbar will show after zooming the stock chart, featuring options for Zoom, Zoom In, Zoom Out, Pan, and Reset. The Pan option allows you to pan the stock chart, while the Reset option allows you to reset the zoomed stock chart.

Modes

The Mode property in StockChartZoomSettings determines whether the stock chart can scale along the horizontal or vertical axes. The default value of the mode is XY (both axis).

There are three types of modes.

X - Allows us to zoom the chart horizontally.
Y - Allows us to zoom the chart vertically.
XY - Allows us to zoom the chart both vertically and horizontally.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableSelectionZooming="true" Mode="ZoomMode.X"></StockChartZoomSettings>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
    </SfStockChart>
}    

@code {
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }  

    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Horizontal Zooming in Blazor Stock Chart

By default, zoom in, zoom out, pan, and reset buttons are available in the toolbar for zoomed stock chart. The ToolbarItems property specifies which tools should be displayed in the toolbar.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableSelectionZooming="true" EnableMouseWheelZooming="true"
                       EnablePinchZooming="true" ToolbarItems="@ToolbarItem"></StockChartZoomSettings>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
    </SfStockChart>
}

@code {
    public List<ToolbarItems> ToolbarItem = new List<ToolbarItems>() { ToolbarItems.Zoom, ToolbarItems.Reset, ToolbarItems.Pan };
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }   

    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Zooming Option in Blazor Stock Chart Toolbar

Enable pan

By using the EnablePan property, one can pan the zoomed stock chart without the help of toolbar items.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableSelectionZooming="true" EnablePan="true"></StockChartZoomSettings>
            <StockChartPrimaryXAxis ZoomFactor="0.2" ZoomPosition="0.6">
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
        </StockChartChartArea>
    </SfStockChart>
}    

@code {
    
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }   

    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Zooming with Pan in Blazor Stock Chart Toolbar

Enable scrollbar

The EnableScrollbar property can be used to add a scrollbar to a zoomed stock chart. The stock chart can be panned or zoomed using this scrollbar.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableMouseWheelZooming="true" EnableScrollbar="true" EnablePinchZooming="true"
                       EnableSelectionZooming="true"></StockChartZoomSettings>
            <StockChartPrimaryXAxis>
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
        </StockChartChartArea>
    </SfStockChart>
}

@code {
    
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }   

    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Zooming with Scrollbar in Blazor Stock Chart

Auto interval on zooming

The axis interval will be calculated automatically with respect to the zoomed range, if the EnableAutoIntervalOnZooming property is set to true.

@using Syncfusion.Blazor.Charts
@using System.IO
@using System.Runtime.Serialization
@inject NavigationManager NavigationManager
@inject HttpClient Http
@if (DataSource != null)
{
    <SfStockChart Title="AAPL Stock Price">
       <StockChartZoomSettings EnableMouseWheelZooming="true" EnablePinchZooming="true"
                       EnableSelectionZooming="true"></StockChartZoomSettings>
            <StockChartPrimaryXAxis EnableAutoIntervalOnZooming="true">
                <StockChartAxisMajorGridLines Width="0"></StockChartAxisMajorGridLines>
                <StockChartAxisCrosshairTooltip Enable="true"></StockChartAxisCrosshairTooltip>
            </StockChartPrimaryXAxis>
            <StockChartPrimaryYAxis>
                <StockChartAxisLineStyle Width="0"></StockChartAxisLineStyle>
                <StockChartAxisMajorTickLines Width="0"></StockChartAxisMajorTickLines>
            </StockChartPrimaryYAxis>
            <StockChartSeriesCollection>
                <StockChartSeries DataSource="@DataSource" Type="ChartSeriesType.Candle"></StockChartSeries>
            </StockChartSeriesCollection>
            <StockChartChartArea>
                <StockChartChartAreaBorder Width="0"></StockChartChartAreaBorder>
            </StockChartChartArea>
    </SfStockChart>
}

@code {
    
    public ChartData[] DataSource{ get; set; }

     public class ChartData
    {
        public DateTime date { get; set; }
        public double open { get; set; }
        public double low { get; set; }
        public double close { get; set; }
        public double high { get; set; }
        public double volume { get; set; }
    }   

    protected override async Task OnInitializedAsync()
      {
          DataSource = await Http.GetFromJsonAsync<ChartData[]>(NavigationManager.BaseUri +"./chart-data.json");
      }
}

Auto Interval on Zooming in Blazor Area Chart

NOTE

Refer to our Blazor Stock Charts feature tour page for its groundbreaking feature representations and also explore our Blazor Stock Chart Example to know various stock chart types and how to represent time-dependent data, showing trends at equal intervals.