Angular Spline Chart

    The Ignite UI for Angular 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.

    Angular Spline Chart Example

    The following example shows how to create Angular Spline Chart in the IgxCategoryChartComponent control by binding your data and setting the chartType property to Spline enum.

    Angular 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 IgxCategoryChartComponent control by binding your data and setting the chartType property to Spline, as shown in the example below:

    Angular 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 IgxCategoryChartComponent control by binding your data and setting the chartType property to Spline, as shown in the example below:

    Angular 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 IgxCategoryChartComponent 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 Angular Spline Charts that can be created using the IgxDataChartComponent control instead of IgxCategoryChartComponent control with simplified API.

    Angular 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 IgxDataChartComponent control by binding your data to a IgxStackedSplineSeriesComponent, as shown in the example below:

    Angular 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 IgxDataChartComponent control by binding your data to a IgxStacked100SplineSeriesComponent, 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 IgxCategoryChartComponent chartType = Spline
    Stacked Spline IgxDataChartComponent IgxStackedSplineSeriesComponent
    Stacked 100% Spline IgxDataChartComponent IgxStacked100SplineSeriesComponent