DxChartStepAreaSeries<T, TArgument, TValue> Class

Defines a step area series.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

public class DxChartStepAreaSeries<T, TArgument, TValue> :
    DxChartAreaSeriesBase<T, TArgument, TValue>

Type Parameters

Name	Description
T

The data type.

| | TArgument |

The argument type.

| | TValue |

The value type.

Remarks

The step area series displays data as a polyline that connects the series values by horizontal and vertical line segments. The area between the polyline and the argument axis is shaded with a color.

Follow the steps below to create a step area series:

Use the DxChart.Data property to specify an IEnumerable<T> data source.
Add a DxChartStepAreaSeries object to chart markup.
Use series ArgumentField and ValueField properties to specify data source fields that contain arguments and values for chart points.

For a sample data source, refer to our GitHub repository.

razor

@inject ISalesInfoDataProvider Sales
<DxChart Data="chartsData"
         LabelOverlap="ChartLabelOverlap.Hide"
         Width="100%">
    <DxChartStepAreaSeries 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)" />
    </DxChartStepAreaSeries>
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Right" />
@* ... *@
</DxChart>
@* ... *@
@code {
    IEnumerable<SaleInfo> chartsData;
    bool showSeriesPointMarkers = false;
    bool showSeriesLabels = false;

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

Run Demo: DxChart - Step Area Series

Implements

Inheritance

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