Class ChartMultiLevelLabel

Provides options to customize the multi-level label of the axis in a chart.

Inheritance

System.Object

ChartSubComponent

ChartMultiLevelLabel

Namespace: Syncfusion.Blazor.Charts

Assembly: Syncfusion.Blazor.dll

Syntax

public class ChartMultiLevelLabel : ChartSubComponent, ISubcomponentTracker

Constructors

ChartMultiLevelLabel()

Declaration

public ChartMultiLevelLabel()

Properties

Alignment

Gets or sets the alignment of the multi-level labels in the chart.

Declaration

public Alignment Alignment { get; set; }

Property Value

Type

Description

Alignment

One of the Alignment enumeration values that specifies the positioning of the multi-level labels. The options include: Near: Aligns labels at the start of the multi-level label rectangle (left for horizontal orientation, top for vertical orientation). Center: Centers the multi-level labels within the rectangle. Far: Aligns labels at the end of the multi-level label rectangle (right for horizontal orientation, bottom for vertical orientation). The default value is Alignment.Center.

Remarks

This property determines how the multi-level labels are positioned relative to their placeholder rectangle, providing flexibility in label presentation. Proper alignment can enhance the readability and visual appeal of chart data.

Examples

// This example demonstrates how to alignment the multi-level axis label text in chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel Alignment="Alignment.Far">
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Border

Gets or sets an instance of ChartAxisMultiLevelLabelBorder that specifies the border settings for multi-level labels.

Declaration

public ChartAxisMultiLevelLabelBorder Border { get; set; }

Property Value

Type	Description
ChartAxisMultiLevelLabelBorder	An instance of ChartAxisMultiLevelLabelBorder.

Remarks

The Width, Color, and Type of the border for multi-level labels can be customized using this property.

Examples

// This example demonstrates how to set the border for a multi-level label on the X-axis.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartAxisMultiLevelLabelBorder Width="3" />
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Categories

Gets or sets a list of ChartCategory representing the categories for multi-level labels.

Declaration

public List<ChartCategory> Categories { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<ChartCategory>	A list of ChartCategory.

Remarks

The Start, End, Text, and MaximumTextWidth of multilevel labels can be customized using the Categories which accepts the collections of ChartCategory.

Examples

// This example demonstrates how to configure a multi-level label on the primary X-axis with a maximum text width. The 'MaximumTextWidth' property ensures that the label text
// wraps or truncates to fit within the specified width.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" MaximumTextWidth="50" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Overflow

Gets or sets the text overflow behavior for multi-level labels.

Declaration

public TextOverflow Overflow { get; set; }

Property Value

Type	Description
TextOverflow	One of the TextOverflow enumeration values specifying text overflow options. Options include: TextOverflow.Trim: Trims text exceeding defined margins. TextOverflow.Wrap: Wraps text exceeding defined margins. TextOverflow.None: Displays text without modification. The default value is TextOverflow.Wrap.

Remarks

This property controls how multilevel label text is displayed when space is constrained, allowing for trimming, wrapping, or full display.

Examples

// This example demonstrates how to trim the multi-level axis label text using the Overflow property.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel Overflow="TextOverflow.Trim">
                <ChartCategories>
                    <ChartCategory Start="10" End="13" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

TextStyle

Gets or sets an instance of ChartAxisMultiLevelLabelTextStyle that controls the customization of the multilevel label text.

Declaration

public ChartAxisMultiLevelLabelTextStyle TextStyle { get; set; }

Property Value

Type	Description
ChartAxisMultiLevelLabelTextStyle	An instance of ChartAxisMultiLevelLabelTextStyle.

Remarks

This property can be used to customize the color, and font-properties of the multilevel label text.

Examples

// This example demonstrates how to customize the text style of a multi-level label in the primary X-axis of a Chart.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartAxisMultiLevelLabelTextStyle Size="15px" />
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>