Zooming in Blazor Stock Chart Component

4 Nov 202514 minutes to read

Enable zooming

The stock chart supports three zooming interactions:

Selection – Set EnableSelectionZooming to true in StockChartZoomSettings to enable rubber-band selection zooming.
Mouse wheel – Set EnableMouseWheelZooming to true to zoom in and out using the mouse wheel.
Pinch – Set EnablePinchZooming to true to zoom using pinch gestures on touch-enabled devices.

NOTE

Pinch zooming is supported only in browsers that enable 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

After zooming, the toolbar appears with options for Zoom, Zoom In, Zoom Out, Pan, and Reset. Pan enables panning of the chart, and Reset restores the original view.

Modes

The Mode property in StockChartZoomSettings determines whether scaling occurs along the horizontal axis, vertical axis, or both. The default value is XY (both axes).

There are three modes:

X – Enables horizontal zooming.
Y – Enables vertical zooming.
XY – Enables both horizontal and vertical zooming.

@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 appear in the toolbar after zooming. Use the ToolbarItems property to specify which tools to display.

@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

Use the EnablePan property to allow panning on a zoomed stock chart without relying on 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

Use the EnableScrollbar property to add a scrollbar to a zoomed stock chart. The scrollbar allows panning and further zooming.

@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

Set EnableAutoIntervalOnZooming to true to calculate axis intervals automatically based on the zoomed range.

@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 the Blazor Stock Chart feature tour page for feature overviews and the Blazor Stock Chart example to explore chart types and time based data representation.

Search docs

Ask HelpBot