We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply custom fonts in Xamarin.Forms Chart?


You can set a custom font family to all the text elements in the chart. The following steps describe how to add a custom font file in the platform-specific projects.

 

Android:

Add a custom font file in the Assets folder and set Build Action to AndroidAsset for the font file.

 

iOS:

Step1: Add a custom font file in the Resources folder and set Build Action to BundleResource. Then, ensure that the copy to output directory is set to AlwaysCopy.

Step2: Add a custom font file name in the info.plist file as demonstrated in the following code sample.

<dict>……<key>UIAppFonts</key>
<array>
<string>Lobster-Regular.ttf</string>
……</dict>

 

UWP:

Add a custom font file in the Assets folder and set Build Action to Content.

 

Please refer to the following code sample to set a custom font for chart legend labels and you can download the complete sample here.

XAML:

 

<ResourceDictionary>
   <OnPlatform x:TypeArguments="x:String" x:Key="CustomFont">
      <On Platform="iOS" Value="Lobster-Regular" />
      <On Platform="Android" Value="Lobster-Regular.ttf#Lobster-Regular" />
      <On Platform="UWP" Value="Assets/Fonts/Lobster-Regular.ttf#Lobster" />
   </OnPlatform>
</ResourceDictionary>
 
<chart:SfChart.Legend>
   <chart:ChartLegend>
      <chart:ChartLegend.LabelStyle>
         <chart:ChartLegendLabelStyle FontFamily="{StaticResource CustomFont}" TextColor="Blue" FontSize="18"/>
      </chart:ChartLegend.LabelStyle>
   </chart:ChartLegend>
</chart:SfChart.Legend>

 

C#:

 

chart.Legend = new ChartLegend();
chart.Legend.LabelStyle.TextColor = Color.Blue;
 
if (Device.RuntimePlatform == Device.Android)
{
chart.Legend.LabelStyle.FontFamily = "Lobster-Regular.ttf#Lobster-Regular";
}
else if (Device.RuntimePlatform == Device.iOS)
{
chart.Legend.LabelStyle.FontFamily = "Lobster-Regular";
}
else if (Device.RuntimePlatform == Device.UWP)
{
chart.Legend.LabelStyle.FontFamily = "Assets/Fonts/Lobster-Regular.ttf#Lobster";
}

 

Output:

Chart legend with customized font in Xamarin.Forms

2X faster development

The ultimate Xamarin UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile