Skip to main content
All docs
V24.2

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

DxBarGaugeLegendSettings Class

Contains settings for the Bar Gauge‘s legend.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

#Declaration

C#
public class DxBarGaugeLegendSettings :
    LegendBaseSettings<DxBarGaugeLegendSettings, BarGaugeLegendSettingsModel>,
    IModelProvider<TextFormatSettingsModel>

#Remarks

Use the DxBarGaugeLegendSettings component to configure legend settings for the DxBarGauge component.

To display a legend, add a DxBarGaugeLegendSettings object to the bar gauge markup and enable the Visible property.

#Component-Level Settings

The DxBarGaugeLegendSettings component allows you to specify the following properties at the component level:

HorizontalAlignment | VerticalAlignment
Position the legend in the bar gauge.
PaddingLeftRight | PaddingTopBottom
Allow you to adjust paddings between edges and content in the legend.
Orientation | ColumnCount | ColumnSpacing | RowCount | RowSpacing | ItemTextPosition
Specify the layout and arrangement of legend items.
BackgroundColor
Allows you to change the legend’s background color.
MarkerSize
Specifies the size of legend item markers.

#Nested Objects

In addition to component-level settings, you can also add the following objects to DxBarGaugeLegendSettings markup:

DxLegendTitleSettings | DxLegendSubtitleSettings
Implement the legend’s title and subtitle.
DxFontSettings | DxTextFormatSettings
Contain font and format settings for legend item captions.
DxBorderSettings
Configures legend borders.
DxMarginSettings
Specifies legend margins.

#Example

The following code snippet adds a legend to the DxBarGauge component and configures legend settings:

Bar Gauge - Legend Customization

Razor
<DxBarGauge Width="100%"
            Height="500px"
            StartValue="0"
            EndValue="100"
            Values="@Values">
    <DxBarGaugeLegendSettings Visible="true"
                              ItemCaptions="@LegendItemCaptions"
                              VerticalAlignment="VerticalEdge.Bottom"
                              HorizontalAlignment="HorizontalAlignment.Center">
        <DxLegendTitleSettings Text="Series">
            <DxFontSettings Color="purple" Weight="700" />
        </DxLegendTitleSettings>
        <DxBorderSettings Visible="true" Color="purple" />
        <DxFontSettings Weight="300" />
        <DxMarginSettings Top="30" />
    </DxBarGaugeLegendSettings>
    @* ... *@
</DxBarGauge>

@code {
    double[] Values = new double[] { 47.27, 65.32, 84.59, 81.86, 99 };
    string[] LegendItemCaptions = new string[] { "Metacritic", "Ratingraph.com", "Rotten Tomatoes", "IMDb", "TV.com" };
}

#Inheritance

Object
ComponentBase
DxSettingsComponent<DevExpress.Blazor.ClientComponents.Internal.BarGaugeLegendSettingsModel>
DxComplexSettingsComponent<DxBarGaugeLegendSettings, DevExpress.Blazor.ClientComponents.Internal.BarGaugeLegendSettingsModel>
LegendBaseSettings<DxBarGaugeLegendSettings, DevExpress.Blazor.ClientComponents.Internal.BarGaugeLegendSettingsModel>
DxBarGaugeLegendSettings
See Also