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:
