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

This article explains how to render the spline curve in specified data points in Blazor Charts.

Displaying spline exactly with provided points

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

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 smooths between data points. To adjust the spline to bend at each data point provided in the data source, you can use the Monotonic SplineType, which aligns the spline directly with the specified points.

The below code example demonstrates how to render spline exactly with 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 bend spline curve at provided data points in Blazor Charts. For more features, visit our [Blazor Charts feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our [Blazor Charts example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries 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!