Skip to main content

DxChartLineSeries<T, TArgument, TValue> Class

Defines a line series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartLineSeries<T, TArgument, TValue> :
    DxChartLineSeriesBase<T, TArgument, TValue>

Type Parameters

Name Description
T

The data type.

TArgument

The argument type.

TValue

The value type.

Remarks

Line series visualize data as points joined by line segments. Follow the steps below to create a line series:

  1. Use the DxChart.Data property to specify a data source.
  2. Add a DxChartLineSeries 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.

DxChart - Line Series

@inject ISalesInfoDataProvider Sales

<DxChart Data="chartsData"
         Width="100%"
         LabelOverlap="ChartLabelOverlap.Hide">
    <DxChartLineSeries 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)" />
    </DxChartLineSeries>
    <DxChartLineSeries 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)" />
    </DxChartLineSeries>
    <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: Charts - Line Series

Inheritance

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