Skip to main content

DxChartBarSeries<T, TArgument, TValue> Class

Defines a bar series.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public class DxChartBarSeries<T, TArgument, TValue> :
    DxChartBarSeriesBase<T, TArgument, TValue>

Type Parameters

Name Description
T

The data type.

TArgument

The argument type.

TValue

The value type.

Remarks

The bar series displays data as a collection of rectangular bars. Follow the steps below to create a bar series:

  1. Use the DxChart.Data property to specify an IEnumerable<T> data source.
  2. Add a DxChartBarSeries object to chart markup.
  3. 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.

DxChart - Bar Series

@inject IPopulationStructureDataProvider DataProvider
<DxChart T="PopulationAgeStructureItem"
         Data="@ChartsData"
         Width="100%">
    <DxChartTitle Text="Population: Age Structure">
        <DxChartSubTitle Text="Data Estimate for 2020" />
    </DxChartTitle>
    <DxChartBarSeries Name="0-14 years"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "0-14 years"' />
    <DxChartBarSeries Name="15-64 years"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "15-64 years"' />
    <DxChartBarSeries Name="65 years and older"
                      T="PopulationAgeStructureItem"
                      TArgument="string"
                      TValue="int"
                      ArgumentField="pasi => pasi.Country"
                      ValueField="pasi => pasi.Population"
                      SummaryMethod="Enumerable.Sum"
                      Filter='pasi => pasi.AgeGroup == "65 years and older"' />
    <DxChartLegend Position="RelativePosition.Outside"
                   HorizontalAlignment="HorizontalAlignment.Center"
                   VerticalAlignment="VerticalEdge.Bottom" />
@* ... *@
</DxChart>

@code {
    IEnumerable<PopulationAgeStructureItem> ChartsData;

    protected override async Task OnInitializedAsync() {
        ChartsData = await DataProvider.QueryData();
    }
    [Parameter] public bool ShowSeriesPointMarkers { get; set; }
    [Parameter] public bool ShowSeriesLabels { get; set; }
}

Run Demo: DxChart - Bar Series

Inheritance

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