How to apply custom fonts to chart elements in .NET MAUI Chart?

5 mins read

Custom fonts are typefaces not included in the standard font collections available on an OS. They are unique or specifically designed fonts that differ from common system fonts like Arial, Times New Roman, etc. We can apply different custom font families to individual text elements in the .NET MAUI Cartesian Chart. The following steps describe how to achieve this:

Step 1:

Initialize the SfCartesianChart using the guidelines document.

Step 2:

Download the required custom font files and place them in the fonts folder of your sample with the .ttf extension.

Step 3:

In the MauiProgram.cs class, configure the custom font files with the name using the following format:

public static MauiApp CreateMauiApp()
{
       .ConfigureFonts(fonts =>
       {
           fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
           fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
           fonts.AddFont("Pacifico.ttf", "Pacifico");
           fonts.AddFont("FFFTusj.ttf", "FFFTusj");
           fonts.AddFont("Windsong.ttf", "Windsong");
       });
}

Step 4:

Apply the desired custom fonts to specific chart elements by binding their names to the font family as demonstrated below:

XAML

<chart:SfCartesianChart>
   <!--Chart Title-->
   <chart:SfCartesianChart.Title>
       <Label Text="Tasks Completed VS Target by Month"
                    FontSize="17"
                    FontFamily="Pacifico"/>
   </chart:SfCartesianChart.Title>
   

<!--Axis Labels-->
<chart:SfCartesianChart.XAxes>
   <chart:CategoryAxis>
       <chart:CategoryAxis.Title>
           <chart:ChartAxisTitle Text="Month"
                                 FontFamily="Pacifico"
                                 TextColor="Black"/>
       </chart:CategoryAxis.Title>
       <chart:CategoryAxis.LabelStyle>
           <chart:ChartAxisLabelStyle FontSize="17"
                                      FontAttributes="Bold"/>
       </chart:CategoryAxis.LabelStyle>
   </chart:CategoryAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
   <chart:NumericalAxis>
       <chart:NumericalAxis.Title>
           <chart:ChartAxisTitle Text="Counts"
                                 FontFamily="Pacifico"/>
       </chart:NumericalAxis.Title>
       <chart:NumericalAxis.LabelStyle>
           <chart:ChartAxisLabelStyle FontFamily="Windsong" 
                                      FontSize="17"
                                      TextColor="Black"
                                      FontAttributes="Bold"/>
       </chart:NumericalAxis.LabelStyle>
   </chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>


<!--Data Label-->
<chart:ColumnSeries ItemsSource="{Binding TaskStatus}"
                   XBindingPath="Month" 
                   YBindingPath="TargetCount"
                   ShowDataLabels="True" >  
   <chart:ColumnSeries.DataLabelSettings>
       <chart:CartesianDataLabelSettings>
           <chart:CartesianDataLabelSettings.LabelStyle>
               <chart:ChartDataLabelStyle FontFamily="FFFTusj"
                                          FontSize="15"/>
           </chart:CartesianDataLabelSettings.LabelStyle>
       </chart:CartesianDataLabelSettings>
   </chart:ColumnSeries.DataLabelSettings>
</chart:ColumnSeries>
…
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();

//Chart Title
chart.Title = new Label
{
   Text = "Tasks Completed VS Target by Month",
   FontSize = 17,
   FontFamily = "Pacifico",
};

CategoryAxis primaryAxis = new CategoryAxis();

//Chart Axis Title
primaryAxis.Title = new ChartAxisTitle
{
   Text = "Month",
   FontFamily = "Pacifico"
};
//Chart Axis Label
primaryAxis.LabelStyle.FontFamily = "Windsong";
primaryAxis.LabelStyle.FontSize = 17;
primaryAxis.LabelStyle.FontAttributes = FontAttributes.Bold;
chart.XAxes.Add(primaryAxis);


NumericalAxis secondaryAxis = new NumericalAxis();
//Chart Axis Title
secondaryAxis.Title = new ChartAxisTitle
{
   Text = "Counts",
   FontFamily = "Pacifico"
};
//Chart Axis Label
secondaryAxis.LabelStyle.FontFamily = "Windsong";
secondaryAxis.LabelStyle.FontSize = 17;
secondaryAxis.LabelStyle.FontAttributes = FontAttributes.Bold;
chart.YAxes.Add(secondaryAxis);


//Data Label 
ColumnSeries series = new ColumnSeries()
{

   ItemsSource = (new ViewModel()).TaskStatus,
   XBindingPath = "Month",
   YBindingPath = "TargetCount",
   ShowDataLabels= true,
              
};
series.DataLabelSettings = new CartesianDataLabelSettings();
series.DataLabelSettings.LabelStyle.FontFamily = "FFFTusj";                                             
series.DataLabelSettings.LabelStyle.FontSize = 15;

…
chart.Series.Add(series);
this.Content = chart;

Output:

Conclusion

I hope you enjoyed learning how to apply custom fonts to chart elements in .NET MAUI Chart.

Refer to our .NET MAUI Chart feature tour page to learn about its other groundbreaking feature representations. You can also explore our .NET MAUI Chart documentation to understand how to present and manipulate data.

For current customers, check out our .NET MAUI from the License and Downloads page. If you are new to Syncfusion®, try our 30-day free trial to check out our .NET MAUI Chart and other .NET MAUI components.

Please let us know in the comments section if you have any queries or require clarification. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)