What’s New in Blazor Charts: 2023 Volume 2
Tags: blazor, chart, web, ui
Published: 2023-07-26 14:45:48

---
title: What’s New in Blazor Charts: 2023 Volume 2
published: true
date: 2023-07-26 12:48:15 UTC
tags: blazor, chart, web, ui
canonical_url: https://www.syncfusion.com/blogs/post/whats-new-blazor-charts.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hjd2sn1teah8qp3npohb.png
---
Syncfusion [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Blazor Charts") is a well-crafted charting component for visualizing data. It contains a rich UI gallery of 50+ charts and graphs, ranging from line to financial, that cater to all charting scenarios.

In this blog, we’ll see the new features included for the Blazor Charts component in the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release.

## New Blazor Range Step Area Chart

The new [Blazor Range Step Area Chart](https://blazor.syncfusion.com/documentation/chart/chart-types/range-step-area "Getting started with the Blazor Range Step Area Chart") is designed to display continuous data points as steps that fluctuate between high and low values over time intervals and across different categories. Unlike the traditional area charts, only the area between the high and low values in the range step area chart is filled with color, and a step line connects the data points.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Blazor-range-step-area-chart-1.png" alt="Blazor Range Step Area Chart" style="width:100%">

  <figcaption>Blazor Range Step Area Chart</figcaption>

</figure>

### Why use a range step area chart?

The Blazor Range Step Area Chart is handy when you need to showcase the variation between minimum and maximum values in data sets, such as temperature or price fluctuations. It allows you to plot data emphasizing gradual changes.

To utilize the Range Step Area Chart effectively, you need to provide the following values as input.
<table width="594">
<tbody>
<tr>
<td width="168">
<p>Value</p>
</td>
<td width="168">
<p>Type</p>
</td>
<td width="258">
<p>Description</p>
</td>
</tr>
<tr>
<td width="168">
<p>X</p>
</td>
<td width="168">
<p>Int/Double/String/DateTime</p>
</td>
<td width="258">
<p>Denotes the x-axis value of the data point.</p>
</td>
</tr>
<tr>
<td width="168">
<p>High</p>
</td>
<td width="168">
<p>Int/Double</p>
</td>
<td width="258">
<p>Denotes the high value in the data series.</p>
</td>
</tr>
<tr>
<td width="168">
<p>Low</p>
</td>
<td width="168">
<p>Int/Double</p>
</td>
<td width="258">
<p>Denotes the low value in the data series.</p>
</td>
</tr>
</tbody>
</table>
Refer to the following code example. In it, we have used the Blazor Range Step Area Chart to visualize the temperature variation in a year.

```xml
<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">            
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= 35, Low= 25 },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Visualizing-temperature-variation-in-a-year-using-Blazor-range-step-area-chart.png" alt="Visualizing temperature variation in a year using Blazor Range Step Area Chart" style="width:100%">

  <figcaption>Visualizing temperature variation in a year using Blazor Range Step Area Chart</figcaption>

</figure>

### Key features

#### Markers

The Blazor Range Step Area Chart allows you to mark the data points with various built-in shapes, including circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. Moreover, you can use images to make the data points more visually appealing.

Refer to the following code example to enable the marker for a data series.

```xml
<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
   </ChartMarker>
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Low { get; set; }
        public double High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= 35, Low= 25 },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Adding-markers-to-Blazor-range-step-area-chart.png" alt="Adding markers to Blazor range step area chart" style="width:100%">

  <figcaption>Adding markers to Blazor range step area chart</figcaption>

</figure>

#### Data labels

Data labels enable you to display information about the data points within the chart. You can leverage HTML elements such as images, divs, and spans by adding templates to enhance the appearance of data labels. Additionally, data labels can be rotated to any desired angle.

Refer to the following code example to enable data labels in the chart.

```xml
<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
    <ChartDataLabel Visible="true"></ChartDataLabel>
   </ChartMarker>             
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Adding-data-labels-to-Blazor-range-step-area-chart.png" alt="Adding data labels to Blazor range step area chart" style="width:100%">

  <figcaption>Adding data labels to Blazor range step area chart</figcaption>

</figure>

#### Empty points

When no data is available for specific dates or categories, you can elegantly handle them within the chart using empty data points.

```xml
<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
 <ChartSeriesCollection>
  <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
   <ChartMarker Visible=true Height="10" Width="10">
    <ChartDataLabel Visible="true"></ChartDataLabel>
   </ChartMarker>
   <ChartSeriesBorder Width="2"></ChartSeriesBorder>
  </ChartSeries>
 </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public Nullable<double> Low { get; set; }
        public Nullable<double> High { get; set; }
    }

    public List<ChartData> WeatherReports = new List<ChartData>
    {
        new ChartData { X= "Jan", High= 29, Low= 22 },
        new ChartData { X= "Feb", High= 32, Low= 22 },
        new ChartData { X= "Mar", High= 35, Low= 25 },
        new ChartData { X= "Apr", High= 37, Low= 27 },
        new ChartData { X= "May", High= null, Low= null },
        new ChartData { X= "Jun", High= 32, Low= 22 },
        new ChartData { X= "Jul", High= 30, Low= 20 },
        new ChartData { X= "Aug", High= 32, Low= 22 },
        new ChartData { X= "Sep", High= 35, Low= 25 },
        new ChartData { X= "Oct", High= 37, Low= 27 },
        new ChartData { X= "Nov", High= 35, Low= 25 },
        new ChartData { X= "Dec", High= 32, Low= 22 }
    };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Empty-data-points-in-Blazor-range-step-area-chart.png" alt="Empty data points in Blazor range step area chart" style="width:100%">

  <figcaption>Empty data points in Blazor range step area chart</figcaption>

</figure>

#### Customization

The Blazor Range Step Area Chart provides built-in APIs for easy customization. You can tailor the appearance of the chart using the following properties:

- [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill "Fill property of Blazor Charts")—To change the color of the data series.
- [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity "Opacity property of Blazor Charts")—To control the transparency of the fill color.
- [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray "DashArray property of Blazor Charts")—To alter the pattern of dashes in the data series.
- [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html "ChartSeriesBorder class of Blazor Charts")—To modify the [color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color "Color property of Blazor Charts") and [width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width "Width property of Blazor Charts") of the chart series border.

Refer to the following code example.

```xml
<ChartSeriesCollection>
 <ChartSeries DataSource="@WeatherReports" XName="X" High="High" Low="Low" DashArray="2,3" Fill="red" Opacity="0.5" Type="ChartSeriesType.RangeStepArea">
  <ChartMarker Visible=true Height="10" Width="10">                 
  </ChartMarker>
  <ChartSeriesBorder Width="2"></ChartSeriesBorder>
 </ChartSeries>
</ChartSeriesCollection>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Customizing-the-Blazor-range-step-area-chart.png" alt="Customizing the Blazor Range Step Area Chart" style="width:100%">

  <figcaption>Customizing the Blazor Range Step Area Chart</figcaption>

</figure>

#### Other supported features

The Blazor Range Step Area Chart supports various other data visualization capabilities, including animation, multiple series, tooltips, legends, zooming, and panning.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Data-visualization-features-of-Blazor-range-step-area-chart.png" alt="Data visualization features of Blazor Range Step Area Chart" style="width:100%">

  <figcaption>Data visualization features of Blazor Range Step Area Chart</figcaption>

</figure>

**Note:** For more details, refer to the [Range Step Area Chart documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/range-step-area "Getting started with Blazor Range Step Area Chart") and [live demos](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=fluent "Blazor Range Step Area Chart demos").

## What’s new in existing charts?

Let’s see the new features added in the existing Blazor Chart types for the 2023 Volume 2 release!

### Cross marker

In this release, a new **cross marker shape** has been introduced. This shape is beneficial for highlighting data points and emphasizing essential values in charts.

To use it, first, we should enable markers for data points in our Blazor Charts. This can be done by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Visible "Visible property of Blazor Charts") property of the [ChartMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarker.html#Syncfusion_Blazor_Charts_ChartMarker__ctor "ChartMarker() constructor of Blazor Charts") to **true**.

To render cross markers, we need to set the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape "Shape property of Blazor Charts") property of the **ChartMarker** to [**ChartShape.Cross**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Cross "ChartShape.Cross field for Blazor Charts"). This will transform the default marker shape into a cross shape.

Refer to the following code example.

```xml
@using Syncfusion.Blazor.Charts

<SfChart>
 <ChartSeriesCollection>
  <ChartSeries DataSource="@ConsumerReports" XName="X" YName="Y" Type="ChartSeriesType.Line">
   <ChartMarker Visible="true" Height="20" Width="20" Shape="ChartShape.Cross" />
   </ChartSeries>
  </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public string X { get; set; }
        public double Y { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
    {
        new ChartData{ X= "Monday", Y= 28 },
        new ChartData{ X= "Tuesday", Y= 20 },
        new ChartData{ X= "Wednesday", Y= 30 },
        new ChartData{ X= "Thursday", Y= 22 },
        new ChartData{ X= "Friday", Y= 32 },
        new ChartData{ X= "Saturday", Y= 35 },        
    };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Cross-markers-in-a-Blazor-line-chart.png" alt="Cross markers in a Blazor line chart" style="width:100%">

  <figcaption>Cross markers in a Blazor line chart</figcaption>

</figure>

### Auto marker shape

By default, when data markers are enabled in Blazor Charts, all series will be rendered with the same marker shape: a circle.

However, in this latest release, we introduced a new [AutoMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Auto "AutoMarker field of Blazor Charts") shape option. Now, the **ChartMarker** class’s **Shape** property is set to [**ChartShape.Auto**](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Auto "ChartShape.Auto field of Blazor Charts") by default when the marker is enabled. So, each series will automatically be rendered with a unique marker shape.

Refer to the following code example.

```xml
@using Syncfusion.Blazor.Charts

<SfChart ID="container">
    <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.DateTimeCategory" Format="yyyy"></ChartPrimaryXAxis>
    <ChartPrimaryYAxis Interval="40"></ChartPrimaryYAxis>
    <ChartSeriesCollection>
        <ChartSeries Name="Series1" DataSource="@ConsumerReports" XName="X" YName="Y1" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series2" DataSource="@ConsumerReports" XName="X" YName="Y2" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series3" DataSource="@ConsumerReports" XName="X" YName="Y3" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series4" DataSource="@ConsumerReports" XName="X" YName="Y4" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series5" DataSource="@ConsumerReports" XName="X" YName="Y5" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
        <ChartSeries Name="Series6" DataSource="@ConsumerReports" XName="X" YName="Y6" Type="ChartSeriesType.Line">
            <ChartMarker Visible="true" Height="10" Width="10" IsFilled="true" />
        </ChartSeries>
    </ChartSeriesCollection>
</SfChart>

@code {
    public class ChartData
    {
        public DateTime X { get; set; }
        public double Y { get; set; }
        public double Y1 { get; set; }
        public double Y2 { get; set; }
        public double Y3 { get; set; }
        public double Y4 { get; set; }
        public double Y5 { get; set; }
        public double Y6 { get; set; }
    }

    public List<ChartData> ConsumerReports = new List<ChartData>
    {
        new ChartData{ X= new DateTime(2005,01,01), Y1 = 100, Y2 = 190, Y3 = 30, Y4 = 125, Y5 = 160, Y6 = 60 },
        new ChartData{ X= new DateTime(2006,01,01), Y1 = 120, Y2 = 140, Y3 = 80, Y4 = 190, Y5 = 170, Y6 = 30 },
        new ChartData{ X= new DateTime(2007,01,01), Y1 = 110, Y2 = 80, Y3 = 60, Y4 = 140, Y5 = 200, Y6 = 30 },
        new ChartData{ X= new DateTime(2008,01,01), Y1 = 30, Y2 = 120, Y3 = 60, Y4 = 180, Y5 = 150, Y6 = 90 },
        new ChartData{ X= new DateTime(2009,01,01), Y1 = 170, Y2 = 50, Y3 = 20, Y4 = 110, Y5 = 140, Y6 = 80 },
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Auto-marker-shape-feature-in-Blazor-Charts.png" alt="Auto marker shape feature in Blazor Charts" style="width:100%">

  <figcaption>Auto marker shape feature in Blazor Charts</figcaption>

</figure>

### Zooming toolbar

The zooming toolbar in the Blazor Charts component provides users with intuitive controls to zoom in, zoom out, pan, and reset the chart. It enables users to interact with the chart and examine data more closely.

To enable this feature, set the [ToolbarDisplayMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartZoomSettings.html#Syncfusion_Blazor_Charts_ChartZoomSettings_ToolbarDisplayMode "ToolbarDisplayMode property of Blazor Charts") property to [ToolbarMode.Always](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ToolbarMode.html#Syncfusion_Blazor_Charts_ToolbarMode_Always "ToolbarMode.Always field of Blazor Charts").

Refer to the following code example to display the zooming toolbar on initial loading of the chart.

```xml
@using Syncfusion.Blazor.Charts

<SfChart>
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
 <ChartPrimaryYAxis Interval="10"></ChartPrimaryYAxis>
  <ChartZoomSettings EnableSelectionZooming="true" EnableMouseWheelZooming="true" EnablePinchZooming="true" ToolbarDisplayMode="ToolbarMode.Always">
  </ChartZoomSettings>
  <ChartSeriesCollection>
   <ChartSeries DataSource="@SalesReports" XName="X" YName="YValue" Type="ChartSeriesType.Column"></ChartSeries>
  </ChartSeriesCollection>
</SfChart>

@code {

    public class ChartData1
    {
        public string X { get; set; }
        public double YValue { get; set; }
    }

    public List<ChartData1> SalesReports = new List<ChartData1>
    {
        new ChartData1 { X= "USA", YValue= 50 },
        new ChartData1 { X= "GBR", YValue= 20 },
        new ChartData1 { X= "CHN", YValue= 26 },
        new ChartData1 { X= "UK", YValue= 20 },
        new ChartData1 { X= "AUS", YValue= 35 },
        new ChartData1 { X= "IND", YValue= 15 },
        new ChartData1 { X= "DEN", YValue= 40 },
        new ChartData1 { X= "MEX", YValue= 30 },
    };
}
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/07/Zooming-toolbar-in-Blazor-Charts.png" alt="Zooming toolbar in Blazor Charts" style="width:100%">

  <figcaption>Zooming toolbar in Blazor Charts</figcaption>

</figure>

## Conclusion

Thanks for reading! In this blog, we’ve seen the new features rolled out in the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Blazor Charts") component for the [2023 Volume 2](https://www.syncfusion.com/forums/183035/essential-studio-2023-volume-2-main-release-v22-1-34-is-available-for-download "Essential Studio 2023 Volume 2") release. Check out the release’s other new features in our [Release Notes](https://blazor.syncfusion.com/documentation/release-notes/22.1.34?type=all "Essential Studio Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components "Essential Studio What's New") pages. Try them out to visualize your data elegantly and leave your feedback in the comments below!

You can download our [free trial](https://www.syncfusion.com/downloads/blazor/confirm "Get the free evaluation of the Essential Studio Products") to try our Syncfusion Blazor components if you don’t have a license.

For questions, you can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/support/tickets "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"). We are always happy to assist you!

## Related blogs

- [What’s New in Blazor Diagram: 2023 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-diagram-2023-volume-2.aspx "Blog: What’s New in Blazor Diagram: 2023 Volume 2")
- [What’s New in Blazor: 2023 Volume 2](https://www.syncfusion.com/blogs/post/whats-new-blazor-2023-volume-2.aspx "Blog: What’s New in Blazor: 2023 Volume 2")
- [Introducing the Next-Gen Blazor PDF Viewer Component](https://www.syncfusion.com/blogs/post/next-gen-blazor-pdf-viewer.aspx "Blog: Introducing the Next-Gen Blazor PDF Viewer Component")
- [Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component](https://www.syncfusion.com/blogs/post/create-thumbnail-images-blazor.aspx "Blog: Simple Steps to Create Thumbnail Images Using the Blazor File Upload Component")