Class ChartCategory

Provides options to customize the category for the multilevel labels.

Inheritance
System.Object
ChartSubComponent
ChartCategory
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class ChartCategory : ChartSubComponent, ISubcomponentTracker
Remarks

This component allows you to adjust properties related to individual categories, enhancing the organizational clarity of chart labels.

Constructors

ChartCategory()

Declaration
public ChartCategory()

Properties

CustomAttributes

Gets or sets the custom attributes for multi-level labels.

Declaration
public object CustomAttributes { get; set; }
Property Value
Type Description
System.Object

An object that represents custom attributes for multi-labels.
Remarks

The provided custom attribute can be accessed by the user from the OnAxisMultiLevelLabelRender event arguments for further actions or modifications.

Examples
 

// This example demonstrates how to modify the text style of a multi-level label using custom attributes from the 'OnAxisMultiLevelLabelRender' event.
<SfChart> 
    <ChartEvents OnAxisMultiLevelLabelRender="OnMultiLevelLabelRender"></ChartEvents> 
    <ChartMultiLevelLabels> 
        <ChartMultiLevelLabel> 
            <ChartCategories> 
                <ChartCategory Start="-0.5" End="3.5" Text="Half yearly 1" MaximumTextWidth=50 CustomAttributes="@customAtt"></ChartCategory> 
                <ChartCategory Start="3.5" End="7.5" Text="Half yearly 2" MaximumTextWidth=50></ChartCategory> 
            </ChartCategories> 
        </ChartMultiLevelLabel> 
    </ChartMultiLevelLabels> 
    ... 
</SfChart> 
@code { 
    object customAtt = new ChartAxisMultiLevelLabelTextStyle 
    { 
        FontFamily = "Roboto", 
        FontWeight = "600", 
        Color = "Red", 
        Size = "14px" 
    }; 
    public void OnMultiLevelLabelRender(AxisMultiLabelRenderEventArgs args) 
    { 
        if (args.CustomAttributes != null) 
        { 
            args.TextStyle = (ChartAxisMultiLevelLabelTextStyle)args.CustomAttributes; 
        } 
    } 
}

End

Gets or sets the end value of the multi-level label.

Declaration
public object End { get; set; }
Property Value
Type Description
System.Object

The end value of the multi-level label, specifying where the label range terminates.
Remarks

This property sets the end of a single multi-level label. It accepts the value based on the provided ValueType and axis labels.

Examples
// This example demonstrates how to define multi-level labels on the primary X-axis of a Chart. The ChartCategory defines a label spanning from value 10 to 40 with the text "Half yearly 1".
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

MaximumTextWidth

Gets or sets the maximum width of the text for multi-level labels.

Declaration
public double MaximumTextWidth { get; set; }
Property Value
Type Description
System.Double

The maximum width of the text for multi-level labels. The default value is 0.
Remarks

If the text exceeds this value, the overflow is handled based on the multi-level label's "TextOverflow" setting.

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>

Start

Gets or sets the start value of the multi-level labels.

Declaration
public object Start { get; set; }
Property Value
Type Description
System.Object

The start value of the multi-level label, determining where the label range begins.
Remarks

This property sets the start of a single multi-level label. It accepts the value based on the provided ValueType and axis labels.

Examples
// This example demonstrates how to define multi-level labels on the primary X-axis of a Chart. The ChartCategory defines a label spanning from value 10 to 40 with the text "Half yearly 1".
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Text

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

Declaration
public string Text { get; set; }
Property Value
Type Description
System.String

A string representing the text for the multi-level labels. The default value is an empty string.
Remarks

This property specifies the label text that will be displayed for a multi-level category in the chart. You can set this to any descriptive text necessary to identify the category.

Examples
// This example demonstrates how to define multi-level label text on the primary X-axis of a chart
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>

Type

Gets or sets the border type for the individual multi-level label.

Declaration
public BorderType Type { get; set; }
Property Value
Type Description
BorderType

One of the BorderType enumerations that specifies the border type for the individual multi-level label. The options include:

  • Rectangle - Renders the border in a rectangular shape around the label.
  • WithoutTopBorder - Renders the border without the top edge around the label.
  • WithoutTopandBottomBorder - Renders the border without both top and bottom edges around the label.
  • WithoutBorder - Renders the label without any border.
  • Brace - Renders the border with a brace-like shape around the label.
  • CurlyBrace - Renders the border with a curly brace-like shape around the label.
    The default value is BorderType.Auto.
Remarks

The multi-level label for this category will be rendered with the specified border type.

Examples
// This example demonstrates how to apply a 'CurlyBrace' border to a multi-level category label on the primary X-axis, grouping values between specified positions.
<SfChart>
    <ChartPrimaryXAxis>
        <ChartMultiLevelLabels>
            <ChartMultiLevelLabel>
                <ChartCategories>
                    <ChartCategory Start="10" End="40" Text="Half yearly 1" Type="BorderType.CurlyBrace" />
                </ChartCategories>
            </ChartMultiLevelLabel>
        </ChartMultiLevelLabels>
    </ChartPrimaryXAxis>
    <ChartSeriesCollection>
        <ChartSeries DataSource="@Data" XName="XValue" YName="YValue" />
    </ChartSeriesCollection>
</SfChart>