Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

BarSeries Class

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

Namespace: DevExpress.Maui.Charts

Assembly: DevExpress.Maui.Charts.dll

NuGet Package: DevExpress.Maui.Charts

#Declaration

C#
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

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

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

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

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

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

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

    <dx:BarSeries.PointColorizer>
        <dx:ValueBandPointColorizer>
            <dx:ValueBandPointColorizer.ColorStops>
                <dx:ColorStop Color="Green" Value1="0" Value2="100"/>
                <dx:ColorStop Color="Red" Value1="0" Value2="-100"/>
            </dx:ValueBandPointColorizer.ColorStops>
        </dx:ValueBandPointColorizer>
    </dx:BarSeries.PointColorizer>
</dx: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

<dx:BarSeries>
    <dx:BarSeries.Data>
        <dx:SeriesDataAdapter DataSource="{Binding Path=ComponentReplyInfos}" ArgumentDataMember="ComponentName">
            <dx:SeriesDataAdapter.ValueDataMembers>
                <dx:ValueDataMember Type="Value" Member="Count"/>
            </dx:SeriesDataAdapter.ValueDataMembers>
        </dx:SeriesDataAdapter>
    </dx:BarSeries.Data>
    <dx:BarSeries.PointColorizer>
        <dx:ColorEachPointColorizer x:Name="col">
            <dx: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>
            </dx:ColorEachPointColorizer.Palette>
        </dx:ColorEachPointColorizer>
    </dx:BarSeries.PointColorizer>
</dx:BarSeries>
See Also