Blazor Spline Chart

    The Ignite UI for Blazor Spline Chart belongs to a group of Category Charts that render as a collection of points connected by smooth curves of spline. Values are represented on the y-axis and categories are displayed on the x-axis. Spline Chart emphasizes the amount of change over a period of time or compares multiple items as well as the relationship of parts to a whole by displaying the total of the plotted values. Spline Chart is identical to Line Chart in all aspects except that line connecting data points has spline interpolation and smoothing for improved presentation of data.

    Blazor Spline Chart Example

    The following example shows how to create Blazor Spline Chart in the IgbCategoryChart control by binding your data and setting the ChartType property to Spline enum.

    Blazor Spline Chart with Single Series

    The Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced since 2009 over a ten-year period for Europe, as shown in the example below.

    You can create this type of chart in the IgbCategoryChart control by binding your data and setting the ChartType property to Spline, as shown in the example below:

    Blazor Spline Chart with Multiple Series

    Since the Spline Chart allows you to combine multiple series and compare or see how they change over time. All we need to do is bind to a data source containing the data for China and the USA, and the chart will automatically update to fit the additional data.

    You can create this type of chart in the IgbCategoryChart control by binding your data and setting the ChartType property to Spline, as shown in the example below:

    Blazor Spline Chart Styling

    If you need a Spline Chart with more features such as composite other series, you can configure the markers, marker brushes, marker outlines, series brushes and series outlines as demonstrated below.

    You can create this type of chart in the IgbCategoryChart control by binding your data and setting the ChartType property to Spline, as shown in the example below:

    Advanced Types of Spline Charts

    The following sections explain more advanced types of Blazor Spline Charts that can be created using the IgbDataChart control instead of IgbCategoryChart control with simplified API.

    Blazor Stacked Spline Chart

    The Stacked Spline Chart is often used to show the change of value over time such as the amount of renewable electricity produced for several years between regions, as we have shown in the example below.

    You can create this type of chart in the IgbDataChart control by binding your data to a IgbStackedSplineSeries, as shown in the example below:

    Blazor Stacked 100% Spline Chart

    The Stacked 100% Spline Chart is identical to the Stacked Spline Chart in all aspects except in their treatment of the values on y-axis. Instead of presenting a direct representation of the data, the Stacked 100% Spline Chart presents the data in terms of percent of the sum of all values in a data point. The example below shows a study made for online shopping traffic by departments via tablet, phone and personal computers.

    You can create this type of chart in the IgbDataChart control by binding your data to a IgbStacked100SplineSeries, as shown in the example below:

    Additional Resources

    You can find more information about related chart types in these topics:

    API References

    The following table lists API members mentioned in the above sections:

    Chart Type Control Name API Members
    Spline IgbCategoryChart ChartType = Spline
    Stacked Spline IgbDataChart IgbStackedSplineSeries
    Stacked 100% Spline IgbDataChart IgbStacked100SplineSeries