How to customize axis labels by utilizing the labelstyle property in .NET MAUI Chart (SfCartesianChart)?

This article provides a detailed walkthrough on how to customize the axis labels by utilizing the LabelStyle property in the .NET MAUI Chart (SfCartesianChart). The LabelStyle provides options to customize the font-family, font-size, font attributes, and text color of the axis labels.

Step 1:

To customize the axis labels appearance, you need to create an instance of ChartAxisLabelStyle class and set to the LabelStyle property.

[XAML]

<chart:SfCartesianChart>
     . . .
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis>
            <chart:CategoryAxis.LabelStyle>
                <chart:ChartAxisLabelStyle/>
            </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.LabelStyle>
                <chart:ChartAxisLabelStyle/>
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart> 

[C#]

SfCartesianChart chart = new SfCartesianChart();

ChartAxisLabelStyle primaryAxisLabelStyle = new ChartAxisLabelStyle();

CategoryAxis categoryAxis = new CategoryAxis()
{
    LabelStyle = primaryAxisLabelStyle
};

ChartAxisLabelStyle secondaryAxisLabelStyle = new ChartAxisLabelStyle();

NumericalAxis numericalAxis = new NumericalAxis()
{
    LabelStyle = secondaryAxisLabelStyle,
};

chart.XAxes.Add(categoryAxis);
chart.YAxes.Add(numericalAxis);

Step 2:

The properties within ChartLabelStyle and ChartAxisLabelStyle allows you to customize the appearance of axis labels on a chart based on your requirements. Here are the properties you can adjust:

• Background - Gets or sets the background color of the labels.
• CornerRadius - Gets or sets a value that defines the rounded corners for the labels.
• FontAttributes - Gets or sets the font style for the label.
• FontFamily - Gets or sets the font family name for the label.
• FontSize - Gets or sets the font size for the label.
• Margin - Gets or sets the margin of the label to customize the appearance of label.
• Stroke - Gets or sets the border stroke color of the labels.
• StrokeWidth - Gets or sets the border thickness of the label.
• TextColor - Gets or sets the color for the text of the label.
• LabelFormat - Gets or sets the label format. This property is used to set numeric or date-time format to the chart axis label.
• LabelAlignment - Gets or sets the axis label at the start, end, and center positions.
• MaxWidth - Gets or sets the wrap width of the axis labels.
• WrappedLabelAlignment - Gets or sets the horizontal rendering position of the wrapped axis labels. The default value is Start, other available values are Center and End.

[XAML]

<chart:SfCartesianChart>
     . . .
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis>
            <chart:CategoryAxis.LabelStyle>
                <chart:ChartAxisLabelStyle Stroke="#FE7A36" StrokeWidth="5" CornerRadius="5" TextColor="White" Background="#280274" FontAttributes="Bold"/>
                </chart:CategoryAxis.LabelStyle>
        </chart:CategoryAxis>
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis>
            <chart:NumericalAxis.LabelStyle>
                <chart:ChartAxisLabelStyle LabelFormat="0' cm" FontSize="14" FontAttributes="Italic,Bold" LabelAlignment="Start" TextColor="#280274"/>
            </chart:NumericalAxis.LabelStyle>
        </chart:NumericalAxis>
    </chart:SfCartesianChart.YAxes>

</chart:SfCartesianChart>  

[C#]

SfCartesianChart chart = new SfCartesianChart();

ChartAxisLabelStyle primaryAxisLabelStyle = new ChartAxisLabelStyle()
{
    Stroke = Color.FromArgb("#FE7A36"),
    StrokeWidth = 5,
    CornerRadius = 5,
    TextColor = Colors.White,
    Background = Color.FromArgb("280274"),
    FontAttributes = FontAttributes.Bold
};

CategoryAxis categoryAxis = new CategoryAxis()
{
    LabelStyle = primaryAxisLabelStyle
};

ChartAxisLabelStyle secondaryAxisLabelStyle = new ChartAxisLabelStyle()
{
    LabelFormat = "0' cm",
    FontSize = 14,
    FontAttributes = FontAttributes.Bold | FontAttributes.Italic ,
    LabelAlignment = ChartAxisLabelAlignment.Start,
    TextColor = Color.FromArgb("280274")
};

NumericalAxis numericalAxis = new NumericalAxis()
{
    LabelStyle = secondaryAxisLabelStyle,
};

chart.XAxes.Add(categoryAxis);
chart.YAxes.Add(numericalAxis);

Output

Conclusion

I hope you enjoyed about learning how to customize the axis labels by utilizing LabelStyle property in .NET MAUI Chart(SfCartesianChart).
You can refer to our .NET MAUI Chart’s feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.
For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.
Please let us know in the following comments section if you have any queries or require clarifications. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!