DEV Community

Cover image for Introducing the New Blazor Spline Range Area Chart
Jollen Moyani for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

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.

Blazor Spline Range Area Chart

Blazor Spline Range Area Chart

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.

Value

Type

Description

X

Int/ Double/ String/ DateTime

X-axis value of the data point.

High

Int/ Double

The high value in the data series.

Low

Int/ Double

The low value in the data series.

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 }
 };
}
Enter fullscreen mode Exit fullscreen mode

Visualizing Temperature Variation in a Year Using Blazor Spline Range Area Chart

Visualizing Temperature Variation in a Year Using Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

Cardinal Type Blazor Spline Range Area Chart

Cardinal Type Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

Adding Markers to Blazor Spline Range Area Chart

Adding Markers to Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

Adding Data Labels to Blazor Spline Range Area Chart

Adding Data Labels to Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

Empty Data Point in Blazor Spline Range Area Chart

Empty Data Point in Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

Customizing the Blazor Spline Range Area Chart

Customizing the Blazor Spline Range Area Chart

Other supported features

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

Data Visualization Features in Blazor Spline Range Area Chart

Data Visualization Features in Blazor Spline Range Area Chart

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>
Enter fullscreen mode Exit fullscreen mode

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}
 };
}
Enter fullscreen mode Exit fullscreen mode

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.

Spline Range Area Chart in a Blazor Application

Spline Range Area Chart in a Blazor Application

References

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

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

Top comments (0)

🌚 Browsing with dark mode makes you a better developer.

It's a scientific fact.