How to Bend Spline Curve at Provided Data Points in Blazor Charts?

This article explains how to render spline curves exactly through specified data points in Blazor Charts.

Displaying spline exactly with provided points

Blazor Charts provide an option to render spline chart curves at specified data point values using the SplineType property.

There are four types of splines: Clamped, Cardinal, Monotonic, and Natural. By default, when the chart series type is set to spline, the chart uses the Natural SplineType, which draws a Bezier curve that smoothly interpolates between data points. To make the spline curve pass through each each data point provided in the data source, you can use the Monotonic SplineType, which aligns the curve exactly with the specified points.

The code example below demonstrates how to render a spline curve that passes exactly through the specified points:

@using Syncfusion.Blazor.Charts

<SfChart>
   <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
   <ChartSeriesCollection>
       <ChartSeries SplineType="SplineType.Monotonic" DataSource="@SalesDetails" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Spline">
           <ChartMarker Visible="true">
               <ChartDataLabel Visible="true"></ChartDataLabel>
           </ChartMarker>
       </ChartSeries>
   </ChartSeriesCollection>
</SfChart>

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

   public List<ChartData> SalesDetails = new List<ChartData>
   {
       new ChartData { X= "Jan", Y= 35 },
       new ChartData { X= "Feb", Y= 28 },
       //...
   };
} 

Output

Live Sample for Rendering Spline at Exact Points

Conclusion:

We hope you found this guide helpful in learning how to render spline curves that pass through exact data points in Blazor Charts. For more features, visit our Blazor Charts feature tour page to learn about its other groundbreaking features, documentation, and how to quickly get started with configuration specifications. You can also explore our Blazor Charts example to understand how to create and manipulate data.

For current customers, our Blazor components are available on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to evaluate our Blazor Charts and other Blazor components.

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