DxBarGaugeLegendSettings Class

Contains settings for the Bar Gauge‘s legend.

Assembly: DevExpress.Blazor.v24.1.dll

Declaration

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

Remarks

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

Show Nested Component Structure

DxBarGauge
- DxBarGaugeLegendSettings

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" };
}