Back to Devexpress

DxChartSeriesLabel.Alignment Property

blazor-devexpress-dot-blazor-dot-dxchartserieslabel-d6afcce8.md

latest3.4 KB
Original Source

DxChartSeriesLabel.Alignment Property

Specifies series label horizontal alignment (relative to the corresponding data point).

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(HorizontalAlignment.Center)]
[Parameter]
public HorizontalAlignment Alignment { get; set; }

Property Value

TypeDefaultDescription
HorizontalAlignmentCenter

A HorizontalAlignment enumeration value.

|

Available values:

NameDescription
Center

Center alignment.

| | Left |

Left alignment.

| | Right |

Right alignment.

|

Remarks

The Alignment property allows you to align series labels relative to corresponding series points. Center, Left, and Right alignment options are available.

The following example uses a radio group to change label alignment:

razor
<div class="my-container">
    <label class="my-padding">Alignment Mode:</label>
    <DxRadioGroup Items="@(Enum.GetValues(typeof(HorizontalAlignment)).Cast<HorizontalAlignment>())"
                  @bind-Value="@Alignment" />
</div>
<DxChart Data="@WeatherForecasts"
         Width="100%"
         CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartLineSeries SummaryMethod="@(i => i.Average())"
                        ValueField="@((DetailedWeatherSummary i) => i.AverageTemperatureF)"
                        ArgumentField="@(i => new DateTime(2000, i.Date.Month, 1))"
                        Name="Temperature, F"
                        Filter="@((DetailedWeatherSummary i) => i.City == "NEW YORK")">
        <DxChartSeriesLabel Position="RelativePosition.Outside"
                            FormatPattern="{argument:MMMM}: {value:#.##} °F"
                            Alignment=@Alignment>
        </DxChartSeriesLabel>
    </DxChartLineSeries>
    <DxChartLegend Visible="false" />
    <DxChartValueAxis>
        <DxChartAxisTitle Text="Temperature, °F" />
    </DxChartValueAxis>
    <DxChartArgumentAxis>
        <DxChartAxisLabel Format="ChartElementFormat.Month" />
    </DxChartArgumentAxis>
</DxChart>

@code {
    IEnumerable<DetailedWeatherSummary> WeatherForecasts;

    protected override async Task OnInitializedAsync() {
        WeatherForecasts = await WeatherSummaryDataProvider.GetDataAsync();
    }

    HorizontalAlignment Alignment { get; set; } = HorizontalAlignment.Center;

    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        DateTime argument = (DateTime)pointSettings.Point.Argument;
        if (argument.Date.Month == 5)
            pointSettings.PointLabel.Visible = true;
    }
}
css
.my-container {
    display: flex; 
    width: 100%; 
}
.my-padding {
    padding-right: 5px;
}

See Also

DxChartSeriesLabel Class

DxChartSeriesLabel Members

DevExpress.Blazor Namespace