Articles in this section
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:

C:\Users\yuvaraj.palanisamy\Pictures\android1.png

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied