Introducing the New Blazor Spline Range Area Chart
Tags: blazor, charts, web, whatsnew
Published: 2023-02-07 12:43:46

---
title: Introducing the New Blazor Spline Range Area Chart
published: true
date: 2023-02-07 11:39:47 UTC
tags: blazor, charts, web, whatsnew
canonical_url: https://www.syncfusion.com/blogs/post/blazor-spline-range-area-chart.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uiw8zwp7pnfffo4fy21z.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. To this collection, we added one more chart type called a [Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-range-area-chart "Blazor Spline Range Area Chart") in the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4 Release") release.

In this blog, we will see the features of the Blazor Spline Range Area Chart and how to get started with it in your application.

## Overview

The [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-range-area-chart "Blazor Spline Range Area Chart") displays continuous data points as splines that vary between high and low values over time intervals and across different categories. Unlike an area chart, the area between the high and low values in the spline range area is filled with color.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Blazor-Spline-Range-Area-Chart-2.png" alt="Blazor Spline Range Area Chart" style="width:100%">

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

</figure>
## Why use a Spline Range Area Chart?

As I said, the Blazor Spline Range Area Chart is mainly used to show variation between minimum and maximum values in data sets like for temperature or price. You can use it to plot data, showing smooth and gradual changes.

The Spline Range Area Chart needs the following values as input.
<table width="647">
<tbody>
<tr>
<td width="141">
<p><strong>Value</strong></p>
</td>
<td width="234">
<p><strong>Type</strong></p>
</td>
<td width="272">
<p><strong>Description</strong></p>
</td>
</tr>
<tr>
<td width="141">
<p>X</p>
</td>
<td width="234">
<p>Int/ Double/ String/ DateTime</p>
</td>
<td width="272">
<p>X-axis value of the data point.</p>
</td>
</tr>
<tr>
<td width="141">
<p>High</p>
</td>
<td width="234">
<p>Int/ Double</p>
</td>
<td width="272">
<p>The high value in the data series.</p>
</td>
</tr>
<tr>
<td width="141">
<p>Low</p>
</td>
<td width="234">
<p>Int/ Double</p>
</td>
<td width="272">
<p>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 Spline Range Area Chart to visualize the temperature variation in a year.

```xml
<ChartSeriesCollection>
  <ChartSeries DataSource="@ChartPoints1" XName="X" High="High" Low="Low" Fill="#C3A6DB" Opacity="0.5" Type="ChartSeriesType.SplineRangeArea">
  </ChartSeries>
</ChartSeriesCollection>
 
@code {
 public List<ChartData> ChartPoints = new List<ChartData>()
 {
    new ChartData { X = "Jan", High = 29, Low = 19 },
    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/02/Visualizing-Temperature-Variation-in-a-Year-Using-Blazor-Spline-Range-Area-Chart-1.png" alt="Visualizing Temperature Variation in a Year Using Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Visualizing Temperature Variation in a Year Using Blazor Spline Range Area Chart</figcaption>

</figure>
## Spline types

The curve that connects the data can be customized with different spline types, such as natural, monotonic, cardinal, and clamped.

Refer to the following code example.

```xml
<ChartSeries DataSource="@ChartPoints1" SplineType="SplineType.Cardinal" XName="X" High="High" Low="Low" Fill="#BDD9F5" Opacity="0.5" Type="ChartSeriesType.SplineRangeArea">                           
</ChartSeries>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Cardinal-Type-Blazor-Spline-Range-Area-Chart-1.png" alt="Cardinal Type Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Cardinal Type Blazor Spline Range Area Chart</figcaption>

</figure>
## Markers and data labels

You can mark the data points in the chart with built-in shapes: circles, rectangles, ellipses, vertical lines, horizontal lines, diamonds, triangles, and pentagons. In addition to these shapes, you can also use images to make the data points more attractive.

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

```xml
<ChartSeries DataSource="@ChartPoints1" XName="X" High="High" Low="Low" Fill="#BDD9F5" Opacity="0.5" Type="ChartSeriesType.SplineRangeArea">
  <ChartMarker Visible="true" Shape="ChartShape.Circle" Width="10" Height="10"></ChartMarker>           
</ChartSeries>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Adding-Markers-to-Blazor-Spline-Range-Area-Chart.png" alt="Adding Markers to Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Adding Markers to Blazor Spline Range Area Chart</figcaption>

</figure>
Data labels allow us to display information about data points in the chart. You can also add a template to display data labels with HTML elements such as images, DIV, and SPANS. The data labels can be rotated to any angle.

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

```xml
<ChartSeries DataSource="@ChartPoints1" XName="X" High="High" Low="Low" Type="ChartSeriesType.SplineRangeArea">
  <ChartMarker Visible="true" Shape="ChartShape.Circle" Width="10" Height="10">
    <ChartDataLabel Visible="true"></ChartDataLabel>
  </ChartMarker>           
</ChartSeries>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Adding-Data-Labels-to-Blazor-Spline-Range-Area-Chart.png" alt="Adding Data Labels to Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Adding Data Labels to Blazor Spline Range Area Chart</figcaption>

</figure>
## Empty point

When no data is available for any date or category, you can elegantly handle that in the chart using an empty data point.

Refer to the following code example.

```xml
<ChartSeries DataSource="@ChartPoints1" XName="X" High="High" Low="Low" Type="ChartSeriesType.SplineRangeArea">
  <ChartEmptyPointSettings Mode="EmptyPointMode.Gap"></ChartEmptyPointSettings>   
</ChartSeries>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Empty-Data-Point-in-Blazor-Spline-Range-Area-Chart-1.png" alt="Empty Data Point in Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Empty Data Point in Blazor Spline Range Area Chart</figcaption>

</figure>
## Customization

You can customize the appearance of the Blazor Spline Range Area Chart using the following built-in APIs:

- [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill "Fill property of Blazor Spline Range Area Chart")—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 Spline Range Area Chart")—To change the opacity 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 Spline Range Area Chart")—To change the pattern of dashes in the data series.
- [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html "ChartSeriesBorder Class of Blazor Spline Range Area Chart")—To change the [color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color "color property of Blazor Spline Range Area Chart") and [width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width "width property of Blazor Spline Range Area Chart") of the chart series border.

Refer to the following code example.

```xml
<ChartSeries DataSource="@ChartPoints1" DashArray="2,3" XName="X" High="High" Low="Low" Fill="#C3A6DB" Opacity="0.5" Type="ChartSeriesType.SplineRangeArea">
 <ChartMarker Visible="true" Shape="ChartShape.Circle" Width="10" Height="10">                   
 </ChartMarker>
 <ChartSeriesBorder Width="2" Color="#9E71C2"></ChartSeriesBorder>
</ChartSeries>
```
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Customizing-the-Blazor-Spline-Range-Area-Chart-1.png" alt="Customizing the Blazor Spline Range Area Chart" style="width:100%">

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

</figure>
## Other supported features

The Blazor Spline Range Area Chart supports other data visualization features such as animation, multiple series, tooltip, legend, zooming, and panning.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Data-Visualization-Features-in-Blazor-Spline-Range-Area-Chart-1.png" alt="Data Visualization Features in Blazor Spline Range Area Chart" style="width:100%">

  <figcaption>Data Visualization Features in Blazor Spline Range Area Chart</figcaption>

</figure>
## Getting started with Blazor Spline Range Area Chart

We have seen the great features of the Blazor Spline Range Area Chart. Let’s see the steps to integrate it into your Blazor application:

1. First, create a new [Blazor server](https://blazor.syncfusion.com/documentation/chart/getting-started "Getting Started with Blazor Chart Component in Blazor Server App") or [WebAssembly](https://blazor.syncfusion.com/documentation/chart/getting-started-wasm "Getting Started with Blazor Chart Component in Blazor WASM App") application. 
2. Then, install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts "Syncfusion.Blazor.Charts NuGet package") NuGet package in your app.
3. Add the following style sheet and script reference in the **Layout.cshtml** file.
```xml
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> 
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
```
4.Initialize the Blazor Spline Range Area Chart like in the following code example.
```xml
<SfChart Title="Temperature Variations by Month" Width="600px">
 <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category">
 </ChartPrimaryXAxis>
 <ChartSeriesCollection>
  <ChartSeries DataSource="@ChartPoints" XName="X" High="High" Low="Low" Type="ChartSeriesType.SplineRangeArea">
  </ChartSeries>           
 </ChartSeriesCollection> 
</SfChart>
 
@code { 
 public List<ChartData> ChartPoints = new List<ChartData>()
 {
    new ChartData { X = "Jan", High = 29, Low = 19},
    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}
 };
}
```

We have bound the data of monthly temperature variation to the chart and mapped the high and low values to the **High** and **Low** properties.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2023/02/Visualizing-Temperature-Variation-in-a-Year-Using-Blazor-Spline-Range-Area-Chart-2.png" alt="Spline Range Area Chart in a Blazor Application" style="width:100%">

  <figcaption>Spline Range Area Chart in a Blazor Application</figcaption>

</figure>
## References

For more details, refer to the [Blazor Spline Range Area Chart documentation](https://blazor.syncfusion.com/documentation/chart/chart-types/spline-range-area "Blazor Spline Range Area Chart documentation"), [live demos](https://blazor.syncfusion.com/demos/chart/spline-range-area?theme=fluent "Blazor Spline Range Area Chart Example"), and [API documentation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html "ChartSeriesType Class API documentation").

## Conclusion

Thanks for reading! In this blog, we have seen the features of the [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-range-area-chart "Blazor Spline Range Area Chart") rolled out in the [2022 Volume 4](https://www.syncfusion.com/forums/179561/essential-studio-2022-volume-4-main-release-v20-4-0-38-is-available-for-download "Essential Studio 2022 Volume 4 Release") release. This release also included other new features in [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts "Blazor Charts"). You can find the details in our [Release Notes](https://www.syncfusion.com/products/release-history "Syncfusion Release Notes") and [What’s New](https://www.syncfusion.com/products/whatsnew/blazor-components "Syncfusion What's New") pages. Try them out to elegantly visualize your data and leave your feedback in the comments below!

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

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

## Related blogs

  - [Building an Application for Microsoft Teams with Blazor](https://www.syncfusion.com/blogs/post/building-an-application-for-microsoft-teams-with-blazor.aspx "Blog: Building an Application for Microsoft Teams with Blazor")
  - [Task Scheduling and Markers in Blazor Gantt Chart](https://www.syncfusion.com/blogs/post/task-scheduling-and-markers-in-blazor-gantt-chart.aspx "Blog: Task Scheduling and Markers in Blazor Gantt Chart")
  - [Implement User Tagging in Blazor Rich Text Editor with Mention Component](https://www.syncfusion.com/blogs/post/user-tagging-in-blazor-rich-text-editor.aspx "Blog: Implement User Tagging in Blazor Rich Text Editor with Mention Component")
  - [What’s New in Syncfusion Blazor: 2022 Volume 4](https://www.syncfusion.com/blogs/post/whats-new-in-syncfusion-blazor-2022-volume-4.aspx "Blog: What’s New in Syncfusion Blazor: 2022 Volume 4")
  - [A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly](https://www.syncfusion.com/blogs/post/to-do-app-using-js-interop-with-html5-drag-and-drop-in-blazor-webassembly.aspx "Blog: A Simple To-Do App Using JS Interop with HTML5 Drag and Drop in Blazor WebAssembly")