How to apply the embedded custom font in Xamarin.Forms Charts

1 min read

Each element of Xamarin.Forms Charts can be customized with desired custom font using its in-built support. It also supports to have embedded font family from Xamarin.Forms version 4.6 as specified in this article.

Here, axis labels are displayed by using the applied embedded custom font of nunito-bold.ttf.

[C#]

[assembly: ExportFont("nunito-bold.ttf", Alias = "Nunito")]
 
namespace Chart_GettingStarted
{
 public partial class MainPage : ContentPage
 {
  public MainPage()
  {
   InitializeComponent();
  }
 }
}

[XAML]

<chart:SfChart x:Name="Chart" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
 
        <chart:SfChart.BindingContext>
            <local:ViewModel/>
        </chart:SfChart.BindingContext>
 
        <chart:SfChart.PrimaryAxis>
            <chart:CategoryAxis>
                <chart:CategoryAxis.LabelStyle>
                    <chart:ChartAxisLabelStyle FontFamily="Nunito" FontSize="13" />
                </chart:CategoryAxis.LabelStyle>
            </chart:CategoryAxis>
        </chart:SfChart.PrimaryAxis>
 
        <chart:SfChart.SecondaryAxis>
            <chart:NumericalAxis>
                <chart:NumericalAxis.LabelStyle>
                    <chart:ChartAxisLabelStyle FontFamily="Nunito" FontSize="12"/>
                </chart:NumericalAxis.LabelStyle>
            </chart:NumericalAxis>
        </chart:SfChart.SecondaryAxis>
        <chart:ColumnSeries ItemsSource="{Binding Data}"  XBindingPath="Name" YBindingPath="Height" />
    </chart:SfChart>

Output

Embedded custom font applied to Xamarin.Forms Chart axis

How to apply the embedded custom font in Xamarin.Forms Charts

Output

View the sample in GitHub

See also

Access denied