Back to Devexpress

DxChartStackedSplineSeries<T, TArgument, TValue> Class

blazor-devexpress-dot-blazor-dot-dxchartstackedsplineseries-3.md

latest6.6 KB
Original Source

DxChartStackedSplineSeries<T, TArgument, TValue> Class

Defines a stacked spline series.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public class DxChartStackedSplineSeries<T, TArgument, TValue> :
    DxChartLineSeriesBase<T, TArgument, TValue>

Type Parameters

NameDescription
T

The data type.

| | TArgument |

The argument type.

| | TValue |

The value type.

|

Remarks

Stacked spline series visualize cumulative values (you need to add more than one series). The topmost series displays the total of all available values. Follow the steps below to create a stacked spline series:

  1. Use the DxChart.Data property to specify a data source.
  2. Add a DxChartStackedSplineSeries object to chart markup.
  3. Use series ArgumentField and ValueField properties to specify data source fields that supply arguments and values for chart points.
  4. Optional. Specify series Filter and SummaryMethod properties to filter and aggregate series values.

The following example filters data by region. It also groups arguments by date and calculates aggregate values using the Enumerable.Sum method. For a sample data source, refer to our GitHub repository.

razor
@inject ISalesInfoDataProvider Sales

<DxChart Data="@ChartsData"
         Width="100%"
         LabelOverlap="ChartLabelOverlap.Hide">
    <DxChartStackedSplineSeries Name="North America"
                                T="SaleInfo"
                                TArgument="DateTime"
                                TValue="int"
                                ArgumentField="si => new DateTime(si.Date.Year, si.Date.Month, 1)"
                                ValueField="si => si.Amount"
                                SummaryMethod="Enumerable.Sum"
                                Filter='si => si.Region == "North America" '
                                HoverMode="ChartContinuousSeriesHoverMode.None">
        <DxChartSeriesPoint Visible=ShowSeriesPointMarkers
                            HoverMode="ChartSeriesPointHoverMode.None" />
        <DxChartSeriesLabel Visible=ShowSeriesLabels
                            ValueFormat="ChartElementFormat.Thousands(1)" />
    </DxChartStackedSplineSeries>
    <DxChartStackedSplineSeries Name="Europe"
                                T="SaleInfo"
                                TArgument="DateTime"
                                TValue="int"
                                ArgumentField="si => new DateTime(si.Date.Year, si.Date.Month, 1)"
                                ValueField="si => si.Amount"
                                SummaryMethod="Enumerable.Sum"
                                Filter='si => si.Region == "Europe" '
                                HoverMode="ChartContinuousSeriesHoverMode.None">
        <DxChartSeriesPoint Visible=ShowSeriesPointMarkers
                            HoverMode="ChartSeriesPointHoverMode.None" />
        <DxChartSeriesLabel Visible=ShowSeriesLabels
                            ValueFormat="ChartElementFormat.Thousands(1)" />
    </DxChartStackedSplineSeries>
    <DxChartStackedSplineSeries Name="Asia"
                                T="SaleInfo"
                                TArgument="DateTime"
                                TValue="int"
                                ArgumentField="si => new DateTime(si.Date.Year, si.Date.Month, 1)"
                                ValueField="si => si.Amount"
                                SummaryMethod="Enumerable.Sum"
                                Filter='si => si.Region == "Asia" '
                                HoverMode="ChartContinuousSeriesHoverMode.None">
        <DxChartSeriesPoint Visible=ShowSeriesPointMarkers
                            HoverMode="ChartSeriesPointHoverMode.None" />
        <DxChartSeriesLabel Visible=ShowSeriesLabels
                            ValueFormat="ChartElementFormat.Thousands(1)" />
    </DxChartStackedSplineSeries>
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Right" />
@* ... *@
</DxChart>
@* ... *@
@code {
    IEnumerable<SaleInfo> ChartsData;

    [Parameter] public bool ShowSeriesPointMarkers { get; set; }
    [Parameter] public bool ShowSeriesLabels { get; set; }

    protected override async Task OnInitializedAsync() {
        ChartsData = await Sales.GetSalesAsync();
    }
}

Run Demo: DxChart - Stacked Spline Series

Implements

IComponent

IHandleEvent

IHandleAfterRender

IDisposable

IChartSeries

IChartSeriesBase

Inheritance

Object ComponentBase DxSettingsComponent<DevExpress.Blazor.Internal.IXYChartSeriesModel> DxComplexSettingsComponent<DxChartSeries, DevExpress.Blazor.Internal.IXYChartSeriesModel> DxChartSeries DxChartXYSeries<T, TArgument, TValue, TValue> DxChartLineSeriesBase<T, TArgument, TValue> DxChartStackedSplineSeries<T, TArgument, TValue>

See Also

DxChartStackedSplineSeries<T, TArg, TValue> Members

DevExpress.Blazor Namespace