IChartSeriesLabel Interface

Defines a point’s label settings.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IChartSeriesLabel

Related API Members

The following members return IChartSeriesLabel objects:

• ChartSeriesPointCustomizationSettings.PointLabel

Remarks

IChartSeriesLabel properties allow you to configure point label settings. To access these settings, use the PointLabel property in a CustomizeSeriesPoint event handler.

The following properties are available:

Visible

Allows you to hide or display series labels.

Alignment | HorizontalOffset | VerticalOffset | Position

Specify label location.

RotationAngle

Specifies the rotation angle of series labels.

BackgroundColor | Border | Connector

Customize label appearance.

Texts | Font | FormatPattern

Configure text content and settings for series labels.

ShowForZeroValues

Allows you to hide or display labels for series points with zero values.

Example

The following example demonstrates how to:

• use the DxChartSeriesLabel component to specify the position of all labels;
• use the DxChartSeriesLabelConnector component to customize connectors between data points and labels;
• handle the CustomizeSeriesPoint event to show only labels whose values are between 25 and 75.

Razor

@inject WeatherForecastService ForecastService

<DxChart Data="@ChartData" CustomizeSeriesPoint="@PreparePointLabel">
    <DxChartLineSeries AggregationMethod="@(i => (int)i.Average())"
                       ValueField="@((WeatherForecast i) => i.TemperatureF)"
                       ArgumentField="@(i => i.Date.Date)"
                       Name="Temperature, F">
        <DxChartSeriesLabel Position="RelativePosition.Outside">
            <DxChartSeriesLabelConnector Visible="true" Width="3" />
        </DxChartSeriesLabel>
    </DxChartLineSeries>
</DxChart>

@code {
    WeatherForecast[] ChartData;

    protected override async Task OnInitializedAsync() {
        ChartData = await ForecastService.GetForecastAsync();
    }

    protected void PreparePointLabel(ChartSeriesPointCustomizationSettings pointSettings) {
        double value = (double)pointSettings.Point.Value;
        if (value > 25 && value < 75)
            pointSettings.PointLabel.Visible = true;
    }
}

WeatherForecast

using System;

public class WeatherForecast {
    public DateTime Date { get; set; }
    public int TemperatureC { get; set; }
    public double TemperatureF => Math.Round((TemperatureC * 1.8 + 32), 2);
    public double Precipitation { get; set; }
}

WeatherForecastService

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Threading;
    using System.Threading.Tasks;

    public class WeatherForecastService {
    // ...
        private List<WeatherForecast> Forecast { get; set; }

        public WeatherForecastService() {
        // ...
            Forecast = CreateForecast();
        }

// ...
        private List<WeatherForecast> CreateForecast() {
            var rng = new Random();
            DateTime startDate = DateTime.Now;
            return Enumerable.Range(1, 15).Select(index => new WeatherForecast {
                Date = startDate.AddDays(index),
                TemperatureC = rng.Next(-20, 55),
            }).ToList();
        }

        public Task<WeatherForecast[]> GetForecastAsync(CancellationToken ct = default) {
            return Task.FromResult(Forecast.ToArray());
        }
    }

Program.cs

// ...
builder.Services.AddSingleton<WeatherForecastService>();

Run Demo: Charts - Series Label Customization