DxChartSeriesLabel Class

Provides settings for series labels.

Assembly: DevExpress.Blazor.v23.2.dll

Declaration

public class DxChartSeriesLabel :
    DxComplexSettingsComponent<DxChartSeriesLabel, ChartSeriesLabelModel>,
    IModelProvider<ChartSeriesLabelConnectorModel>,
    IModelProvider<ChartFontModel>,
    IModelProvider<ChartSeriesLabelBorderModel>

Remarks

Use the DxChartSeriesLabel component to show and configure labels for series data points. The specified settings apply to all the labels in the series.

To override settings of individual labels, handle the chart’s CustomizeSeriesPoint event and use the event argument’s PointLabel property. You can also use the FormatPattern property to specify the label’s format.

The following example demonstrates how to:

define the label position at the series level;
show only labels whose values are between 25 and 75;
use the DxChartSeriesLabelConnector component to customize connectors between data points and labels.

A chart with formatted series labels

Run Demo

Razor

@inject IWeatherSummaryDataProvider WeatherSummaryDataProvider
<DxChart Data="@WeatherForecasts"
         CustomizeSeriesPoint="@PreparePointLabel"
         Width="100%">
    <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">
            <DxChartSeriesLabelConnector Visible="true"
                                         Width="3" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
</DxChart>

@code {
    IEnumerable<DetailedWeatherSummary> WeatherForecasts;
    protected override async Task OnInitializedAsync() {
        WeatherForecasts = await WeatherSummaryDataProvider.GetDataAsync();
    }
    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if (value > 50 && value < 70)
            pointSettings.PointLabel.Visible = true;
    }
}

You can also use the DxChartSeriesLabelBorder component to configure label borders. Set the Visible property to true to display borders and use Color, DashStyle, or Width properties to customize border appearance.

To customize font settings of a series label, use the DxChartFont object. Refer to Font Customization for more information.