Category / Section
How to customize the axis labels?
4 mins read
SfChart supports customization of its axis labels using the LabelStyle property of ChartAxis. By using the LabelStyle property, you can customize the following aspects of the axis labels:
- BorderColor—Color of the background border.
- BorderThickness—Thickness of the background border.
- BackgroundColor—Background fill color.
- Font—Represents the size, font-family, and font-weight of the text.
- LabelPosition—Represents the position of the axis labels. Whether it can be inside or outside of the chart area.
- LabelFormat—Formatter string of the labels.
- Margin—Represents the margin between the label and background rectangle.
- TextColor—Color of the labels.
The following code example illustrates the customization of the axis label’s font, position, format, and its color.
C#
chart.PrimaryAxis.LabelStyle.Font = Font.SystemFontOfSize(30); chart.PrimaryAxis.LabelStyle.LabelsPosition = AxisElementPosition.Inside; chart.PrimaryAxis.LabelStyle.LabelFormat = "MMM"; chart.PrimaryAxis.LabelStyle.TextColor = Color.Red;
XAML
<chart:SfChart.PrimaryAxis> <chart:DateTimeAxis > <chart:DateTimeAxis.LabelStyle> <chart:ChartAxisLabelStyle LabelFormat = "MMM" LabelsPosition="Inside" TextColor="Red"> <chart:ChartAxisLabelStyle.Font> <Font FontSize="30"/> </chart:ChartAxisLabelStyle.Font> </chart:ChartAxisLabelStyle> </chart:DateTimeAxis.LabelStyle> </chart:DateTimeAxis> </chart:SfChart.PrimaryAxis>
Output: