Articles in this section
Category / Section

How to apply custom fonts in Xamarin.Forms Chart?

2 mins read

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.



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



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.




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.



   <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" />
         <chart:ChartLegendLabelStyle FontFamily="{StaticResource CustomFont}" TextColor="Blue" FontSize="18"/>




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";



Chart legend with customized font in Xamarin.Forms

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