How to Update the Minimum and Maximum Axis Range in Blazor Charts?

This article explains how to update the minimum and maximum axis range in Blazor Charts.

Update the Minimum and Maximum Axis Range of the Chart

Blazor Charts provides an option to update the minimum and maximum axis range of the chart. This can be achieved by updating the Minimum and Maximum properties in ChartPrimaryXAxis dynamically using the TextBox component.

In this code snippet, the Minimum and Maximum properties of the ChartPrimaryXAxis are updated dynamically using the TextBox component. The TextBox components for minimum and maximum values are bound to inputMin and inputMax, respectively. When the values are changed, the MinimumValue and MaximumValue methods update the min and max properties of the chart’s x-axis. This allows for real-time adjustment of the chart’s axis range based on input.

Index.razor

@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.Inputs

Min
<SfTextBox Width="100px" Value="@inputMin" ValueChange="@MinimumValue"></SfTextBox>
Max
<SfTextBox Width="100px" Value="@inputMax" ValueChange="@MaximumValue"></SfTextBox>

<SfChart Title="Stock Price Analysis">
   <ChartPrimaryXAxis Minimum="@min" Maximum="@max" ValueType="Syncfusion.Blazor.Charts.ValueType.Double" EdgeLabelPlacement="EdgeLabelPlacement.Shift" />
   <ChartPrimaryYAxis Title="Price" LabelFormat="${value}" RangePadding="ChartRangePadding.None" />
   <ChartSeriesCollection>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPointsX" XName="Period" YName="StockPrice" Width="2" Name="Product X">
       </ChartSeries>
       <ChartSeries Type="Syncfusion.Blazor.Charts.ChartSeriesType.Line" DataSource="@ChartPointsY" XName="Period" YName="StockPrice" Width="2" Name="Product Y">
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

@code {
   private Random randomNum = new Random();
   public string inputMin { get; set; } = "0";
   public string inputMax { get; set; } = "700";
   public int min { get; set; } = 0;
   public int max { get; set; } = 700;
   public string Width { get; set; } = "90%";
   private double stockPriceX = 80, stockPriceY = 90;
   public List<LineChartData> ChartPointsX { get; set; } = new List<LineChartData>();
   public List<LineChartData> ChartPointsY { get; set; } = new List<LineChartData>();
   
   private void MinimumValue(Syncfusion.Blazor.Inputs.ChangedEventArgs args)
   {
       min = Convert.ToInt32(args.Value);
       inputMin = args.Value;
       StateHasChanged();
   }
   
   private void MaximumValue(Syncfusion.Blazor.Inputs.ChangedEventArgs args)
   {
       max = Convert.ToInt32(args.Value);
       inputMax = args.Value;
       StateHasChanged();
   }
   
   protected override void OnInitialized()
   {
       GetChartPoints();
   }
   
   private void GetChartPoints()
   {
       for (int i = 0; i < 700; i++)
       {
           if (randomNum.NextDouble() > 0.5)
           {
               stockPriceX += randomNum.NextDouble();
               stockPriceY += randomNum.NextDouble();
           }
           else
           {
               stockPriceX -= randomNum.NextDouble();
               stockPriceY -= randomNum.NextDouble();
           }
           ChartPointsX.Add(new LineChartData
               {
                   Period = i,
                   StockPrice = Math.Round(stockPriceX)
               });
           ChartPointsY.Add(new LineChartData
               {
                   Period = i,
                   StockPrice = Math.Round(stockPriceY)
               });
       }
   }
   
   public class LineChartData
   {
       public double Period { get; set; }
       public double StockPrice { get; set; }
   }
} 

The following GIF illustrates the output of the code snippet.

Live Sample for Updating the Minimum and Maximum Axis Range of the Chart

Conclusion

I hope you enjoyed learning how to update the minimum and maximum axis range of the chart in Blazor Charts.

You can refer to our Blazor Chart feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Chart example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!