DxChartAxisLabel.WordWrap Property

Specifies how the chart wraps overflowing axis labels.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.1.dll

NuGet Package: DevExpress.Blazor

Declaration

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

Property Value

Type	Default	Description
ChartWordWrap	Normal	A ChartWordWrap 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

The DxChart component allows you to reserve an area for an axis and its labels (the PlaceholderSize property). When axis labels overflow this area, you can use the WordWrap property to define how to wrap such labels.

The following example changes the content area size for the argument axis and uses drop-down menus to choose how to display axis labels:

<DxChart Data="@GetData()" Width="100%" Height="500" Rotated="true">
    <DxChartTitle Text="Pizza Shop Complaints" CssClass="mb-2" />
    <DxChartLegend Visible="false" />
        <DxChartBarSeries ArgumentField="@((DataPoint s) => s.Complaint)"
                          ValueField="@((DataPoint s) => s.Count)" />
    <DxChartTooltip Enabled="true">
        <div style="margin: 0.75rem">
            <div class="fw-bold">@context.Point.Argument</div>
            <div>Complaint frequency: @context.Point.Value</div>
        </div>
    </DxChartTooltip>
    <DxChartArgumentAxis PlaceholderSize="@CurrentPlaceholderSize">
        <DxChartAxisLabel WordWrap="@CurrentWordWrap"
                          TextOverflow="@CurrentTextOverflow" />
    </DxChartArgumentAxis>
</DxChart>

@code {
    ChartTextOverflow CurrentTextOverflow = ChartTextOverflow.Ellipsis;
    ChartWordWrap CurrentWordWrap = ChartWordWrap.Normal;
    double CurrentPlaceholderSize = 55;
    List<DataPoint> GetData() {
        List<DataPoint> result = new List<DataPoint>(7);
        result.Add(new DataPoint("Delayed delivery", 1123));
        result.Add(new DataPoint("Cold pizza", 780));
        result.Add(new DataPoint("Damaged pizza", 321));
        result.Add(new DataPoint("Wrong size delivered", 222));
        result.Add(new DataPoint("Not enough cheese", 120));
        result.Add(new DataPoint("Incorrect billing", 89));
        result.Add(new DataPoint("Underbaked or Overbaked", 52));
        return result;
    }
    public class DataPoint {
        public string Complaint { get; set; }
        public int Count { get; set; }
        public DataPoint(string complaint, int count) {
            Complaint = complaint;
            Count = count;
        }
    }
}

Run Demo: Chart - Text Overflow and Word Wrap