Skip to main content
All docs
V25.1
  • DxBarGaugeLegendSettings Class

    Contains settings for the Bar Gauge‘s legend.

    Namespace: DevExpress.Blazor

    Assembly: DevExpress.Blazor.v25.1.dll

    NuGet Package: DevExpress.Blazor

    Declaration

    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

    <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