DxChartSeriesLabel.WordWrap Property

Specifies how the chart wraps text in overflowing pie series labels.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

[DefaultValue(ChartWordWrap.Normal)]
[Parameter]
public ChartWordWrap WordWrap { get; set; }

Property Value

Type	Default	Description
ChartWordWrap	Normal

An enumeration value.

Available values:

Name	Description
Normal

Wraps text at standard breakpoints (spaces).

| | BreakWord |

Wraps text and breaks words.

| | None |

Keeps text on a single line.

Remarks

In some cases, the DxPieChart component treats series labels as overflowing and wraps label text at space characters. Use the WordWrap property to change the wrap mode.

Additionally, you can use the TextOverflow property to define how to display overflowing series labels (hide, truncate with an allipsis, or display them completely).

Note

TextOverflow and WordWrap property values apply to DxPieChartSeries labels only.

Example

The following code snippet uses drop-down menus to choose how to display overflowing series labels:

Razor
DataSource

razor

<label><strong>Text Overflow Mode: </strong></label>
<DxComboBox Text="TextOverflow" @bind-Value="@CurrentTextOverflowMode" Data="Enum.GetValues<ChartTextOverflow>()" />

<label><strong>Word Wrap Mode: </strong></label>
<DxComboBox Text="WordWrap" @bind-Value="@CurrentWordWrapMode" Data="Enum.GetValues<ChartWordWrap>()" />

<DxPieChart Data="@DataSource"
            Height="350px"
            StartAngle="180"
            LabelOverlap="PieChartLabelOverlap.Shift"
            PointSelectionMode="ChartSelectionMode.Multiple">
    <DxPieChartSeries ArgumentField="@((StatisticPoint v) => v.Country)"
                      ValueField="@((StatisticPoint v) => v.Population24)"
                      Name="2024">
        <DxChartSeriesLabel Visible="true"
                            TextOverflow="@CurrentTextOverflowMode"
                            WordWrap="@CurrentWordWrapMode"
                            FormatPattern="{argument}: {value}">
            <DxChartSeriesLabelConnector Visible="true" />
        </DxChartSeriesLabel>
    </DxPieChartSeries>
    <DxChartLegend HorizontalAlignment="HorizontalAlignment.Right"
                   Orientation="Orientation.Vertical"
                   Visible="false" />
    <DxChartTitle Text="Population by European Country, 2024" />
</DxPieChart>

@code {
    TextOverflow CurrentTextOverflowMode { get; set; } = ChartTextOverflow.Ellipsis;
    WordWrap CurrentWordWrapMode { get; set; } = ChartWordWrap.Normal;

    IEnumerable<StatisticPoint> DataSource = Enumerable.Empty<StatisticPoint>();
    protected override void OnInitialized() {
        DataSource = GenerateData();
    }
}

csharp

public static List<StatisticPoint> GenerateData() {
    return new List<StatisticPoint>() {
        new StatisticPoint("Spain", 47910526),
        new StatisticPoint("Greece", 10047817),
        new StatisticPoint("Austria", 9120813),
        new StatisticPoint("Serbia", 6736216),
        new StatisticPoint("Albania", 2791765),
        new StatisticPoint("Slovenia", 2118697),
        new StatisticPoint("Estonia", 1360546),
        new StatisticPoint("Luxemburg", 673036),
        new StatisticPoint("Montenegro", 638479),
        new StatisticPoint("Malta", 539607),
        new StatisticPoint("Iceland", 393396),
        new StatisticPoint("Andorra", 81938),
        new StatisticPoint("Monaco", 38631),
    };
}
public class StatisticPoint {
    public string Country { get; set; }
    public int Population24 { get; set; }
    public StatisticPoint(string country, int population24) {
        Country = country;
        Population24 = population24;
    }
}