BarSeries Class

Displays data as individual bars grouped by arguments, and each bar height is determined by the data value.

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

Declaration

public class BarSeries :
    BarSeriesBase

Remarks

Bars

Example #1

The following example creates a bar series, populates it with data, and configures the settings of the y-axis assigned to the series:

DevExpress Charts for .NET MAUI - Volume bars in financial charts

View Example

XAML

<dxc:BarSeries DisplayName="Volume">
    <dxc:BarSeries.Data>
        <dxc:SeriesDataAdapter DataSource="{Binding StockPrices}" ArgumentDataMember="Date">
            <dxc:ValueDataMember Type="Value" Member="Volume" />
        </dxc:SeriesDataAdapter>
    </dxc:BarSeries.Data>

    <dxc:BarSeries.HintOptions>
        <dxc:SeriesCrosshairOptions PointTextPattern="Volume: ${V$#,###}" />
    </dxc:BarSeries.HintOptions>

    <dxc:BarSeries.Style>
        <dxc:BarSeriesStyle Fill="#ff2196F3"/>
    </dxc:BarSeries.Style>

    <dxc:BarSeries.AxisY>
        <dxc:NumericAxisY>
            <dxc:NumericAxisY.LabelValueNotation>
                <dxc:AxisLabelEngineeringNotation/>
            </dxc:NumericAxisY.LabelValueNotation>
            <dxc:NumericAxisY.Layout>
                <dxc:AxisLayout Anchor1="0" Anchor2="0.25" />
            </dxc:NumericAxisY.Layout>
            <dxc:NumericAxisY.DisplayPosition>
                <dxc:AxisDisplayPositionNear/>
            </dxc:NumericAxisY.DisplayPosition>
            <dxc:NumericAxisY.Label>
                <dxc:AxisLabel Position="Inside" TextFormat="$#"/>
            </dxc:NumericAxisY.Label>
            <dxc:NumericAxisY.Style>
                <dxc:AxisStyle MajorGridlinesVisible="True"
                               LineColor="#8f2196F3"
                               MajorGridlinesColor="#8f2196F3"/>
            </dxc:NumericAxisY.Style>
        </dxc:NumericAxisY>
    </dxc:BarSeries.AxisY>
</dxc:BarSeries>

Example #2

The following example creates a bar series, and colors each point based on the range to which the point belongs:

DevExpress Charts for .NET MAUI - Bar series colored by value ranges

View Example

XAML

<dxc:BarSeries LegendTextPattern="{}Profit from {CLV}% to {CHV}%">
    <dxc:BarSeries.Data>
        <dxc:SeriesDataAdapter 
                DataSource="{Binding CryptocurrencyPortfolioData}"
                ArgumentDataMember="Ticker">
            <dxc:ValueDataMember Type="Value" Member="Profit"/>
        </dxc:SeriesDataAdapter>
    </dxc:BarSeries.Data>

    <dxc:BarSeries.Label>
        <dxc:BarSeriesLabel Position="Outside" 
                            Behavior="Cut" 
                            TextPattern="{}{V}%"/>
    </dxc:BarSeries.Label>

    <dxc:BarSeries.PointColorizer>
        <dxc:ValueBandPointColorizer>
            <dxc:ValueBandPointColorizer.ColorStops>
                <dxc:ColorStop Color="Green" Value1="0" Value2="100"/>
                <dxc:ColorStop Color="Red" Value1="0" Value2="-100"/>
            </dxc:ValueBandPointColorizer.ColorStops>
        </dxc:ValueBandPointColorizer>
    </dxc:BarSeries.PointColorizer>
</dxc:BarSeries>

Example #3

The following example creates a bar series, and colors its points with colors from the palette:

DevExpress Charts for .NET MAUI - Bar series colored with palette colors

View Example

XAML

<dxc:BarSeries>
    <dxc:BarSeries.Data>
        <dxc:SeriesDataAdapter DataSource="{Binding Path=ComponentReplyInfos}" ArgumentDataMember="ComponentName">
            <dxc:SeriesDataAdapter.ValueDataMembers>
                <dxc:ValueDataMember Type="Value" Member="Count"/>
            </dxc:SeriesDataAdapter.ValueDataMembers>
        </dxc:SeriesDataAdapter>
    </dxc:BarSeries.Data>
    <dxc:BarSeries.PointColorizer>
        <dxc:ColorEachPointColorizer x:Name="col">
            <dxc:ColorEachPointColorizer.Palette>
                <x:Array Type="{x:Type Color}">
                    <Color>#FF8873bf</Color>
                    <Color>#CF8873bf</Color>
                    <Color>#AF8873bf</Color>
                    <Color>#9F8873bf</Color>
                    <Color>#7F8873bf</Color>
                    <Color>#6F8873bf</Color>
                </x:Array>
            </dxc:ColorEachPointColorizer.Palette>
        </dxc:ColorEachPointColorizer>
    </dxc:BarSeries.PointColorizer>
</dxc:BarSeries>