How to customize the title of Xamarin.Forms Charts

2 mins read

This article explains how to customize the Xamarin.Forms Chart’s title and its alignment changes. Read out this user guide to get a better understanding of creating Chart control in Xamarin.Forms with its step-by-step process.

Title of Xamarin.Forms Chart will be explaining the use cases of plotting. It has been customized by the following ways.

Alignment changes

Title alignment has been changed by using the TextAlignment property in ChartTitle. It also provide the customization option to change its style using the TextColor, FontSize, and FontAttributes.

[XAML]

  <chart:SfChart HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
            <chart:SfChart.Title>
                <chart:ChartTitle Text="Monthly Revenue" TextColor="Blue" TextAlignment="End" FontAttributes="Italic" FontSize="20" />
            </chart:SfChart.Title>
            <chart:SfChart.BindingContext>
                <local:ViewModel/>
            </chart:SfChart.BindingContext>
            <!--Horizontal axis declaration-->
            <chart:SfChart.PrimaryAxis>
                <chart:CategoryAxis LabelPlacement="BetweenTicks" ShowMajorGridLines="False"/>
            </chart:SfChart.PrimaryAxis>
            <!--Vertical axis declaration-->
            <chart:SfChart.SecondaryAxis>
                <chart:NumericalAxis PlotOffset="15" AxisLineStyle="{x:Null}" />
            </chart:SfChart.SecondaryAxis>
            <!--Series declaration-->
            <chart:SfChart.Series>
                <chart:LineSeries Color="Blue" ItemsSource="{Binding ClimateData}" Label="Heights" XBindingPath="Month" YBindingPath="Temperature" />
            </chart:SfChart.Series>
            <!--ZoomPan behavior declaration-->
            <chart:SfChart.ChartBehaviors>
                <chart:ChartZoomPanBehavior/>
            </chart:SfChart.ChartBehaviors>
        </chart:SfChart>

[C#]

public class ViewModel
    {
        public ObservableCollection<ExportChartDataModel> ClimateData { get; set; }
        public ViewModel()
        {
            ClimateData = new ObservableCollection<ExportChartDataModel>();
            ClimateData.Add(new ExportChartDataModel() { Month = "Jan", Temperature = 33 });
            ClimateData.Add(new ExportChartDataModel() { Month = "Feb", Temperature = 37 });
            ClimateData.Add(new ExportChartDataModel() { Month = "Mar", Temperature = 39 });
            ClimateData.Add(new ExportChartDataModel() { Month = "Apr", Temperature = 43 });
            ClimateData.Add(new ExportChartDataModel() { Month = "May", Temperature = 45 });
            ClimateData.Add(new ExportChartDataModel() { Month = "Jun", Temperature = 43 });
            ClimateData.Add(new ExportChartDataModel() { Month = "Jul", Temperature = 41 });
        
        }
    }
 
    public class ExportChartDataModel
    {
        public string Month { get; set; }
        public double Temperature { get; set; }
    }

Xamarin.Forms chart's title placement

Customization

It supports to change its color and border by using the BorderWidth, BorderColor, and BackgroundColor properties.

[XAML]

  <chart:SfChart>
            <chart:SfChart.Title>
                <chart:ChartTitle Text="Monthly Revenue"  BackgroundColor="#64ccf4"  BorderWidth="4" BorderColor="#faa9ff"  TextColor="Black"  FontAttributes="Italic" FontSize="20" />
            </chart:SfChart.Title>
            <chart:SfChart.BindingContext>
                <local:ViewModel/>
            </chart:SfChart.BindingContext>
…
</chart:SfChart>

Xamarin.Forms Chart's title customization