Introducing the New Blazor Spline Range Area Chart

Syncfusion 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 in the 2022 Volume 4 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 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.

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.

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.

<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 }
 };
}

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.

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

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.

<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>

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.

<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>

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.

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

Customization

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

• Fill—To change the color of the data series.
• Opacity—To change the opacity of the fill color.
• DashArray—To change the pattern of dashes in the data series.
• ChartSeriesBorder—To change the color and width of the chart series border.

Refer to the following code example.

<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>

Other supported features

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

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 or WebAssembly application. 
2. Then, install the Syncfusion.Blazor.Charts NuGet package in your app.
3. Add the following style sheet and script reference in the Layout.cshtml file.

   <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.

   <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.

   

   References

   For more details, refer to the Blazor Spline Range Area Chart documentation, live demos, and API documentation.

   

   Syncfusion Blazor components can be transformed into stunning and efficient web apps.

   Try it Now FREE

   Conclusion

   Thanks for reading! In this blog, we have seen the features of the Blazor Spline Range Area Chart rolled out in the 2022 Volume 4 release. This release also included other new features in Blazor Charts. You can find the details in our Release Notes and 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 to try our Syncfusion Blazor components.

   For questions, you can contact us through our support forum, support portal, or feedback portal. We are always happy to assist you!

   Related blogs

   • Building an Application for Microsoft Teams with Blazor
   • Task Scheduling and Markers in Blazor Gantt Chart
   • Implement User Tagging in Blazor Rich Text Editor with Mention Component
   • 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