Legend

You can set the BorderColor, BorderWidth, BackgroundColor and LabelFont properties to customize the legend. The Position property lets you choose where to display the chart legend.

The image below shows how the FlexPie appears after these properties have been set.

The following code examples demonstrate how to set these properties in C# and in XAML. These examples use the sample created in the Quick Start section.

`In Code`

C#	Copy Code
chart.Legend.BorderColor = Color.FromHex("#00C7CC"); chart.Legend.BorderWidth = 2; chart.Legend.BackgroundColor = Color.FromHex("#DDF9EC"); chart.Legend.LabelFont = Font.OfSize("monospace", 12); chart.Legend.LabelTextColor = Color.FromHex("#022A31"); chart.Legend.Position = Xuni.Xamarin.ChartCore.ChartPositionType.Bottom;

Copy Code

chart.Legend.BorderColor = Color.FromHex("#00C7CC");
chart.Legend.BorderWidth = 2;
chart.Legend.BackgroundColor = Color.FromHex("#DDF9EC");
chart.Legend.LabelFont = Font.OfSize("monospace", 12);
chart.Legend.LabelTextColor = Color.FromHex("#022A31");
chart.Legend.Position = Xuni.Xamarin.ChartCore.ChartPositionType.Bottom;

`In XAML`

Include the ChartCore assembly by modifying the <ContentPage> tag as shown below:

XAML	Copy Code
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="Appl.QuickStart" xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexPie;assembly=Xuni.Xamarin.FlexPie" xmlns:chartcore="clr-namespace:Xuni.Xamarin.ChartCore;assembly=Xuni.Xamarin.ChartCore">

XAML

Copy Code

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
x:Class="Appl.QuickStart"
xmlns:xuni="clr-namespace:Xuni.Xamarin.FlexPie;assembly=Xuni.Xamarin.FlexPie"
xmlns:chartcore="clr-namespace:Xuni.Xamarin.ChartCore;assembly=Xuni.Xamarin.ChartCore">

Add the markup to customize the chart legends inside the markup for the FlexPie control as shown below:

XAML	Copy Code
<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value" Grid.Row="1" Grid.ColumnSpan="2"> <xuni:FlexPie.Legend > <chartcore:ChartLegend BorderColor="#00C7CC" BorderWidth="2" BackgroundColor="#DDF9EC" LabelFont="12" LabelTextColor = "#022A31" Position="Bottom"> </chartcore:ChartLegend> </xuni:FlexPie.Legend> </xuni:FlexPie>

XAML

Copy Code

<xuni:FlexPie x:Name="chart" ItemsSource="{Binding Data}" BindingName="Name" Binding ="Value"
 Grid.Row="1" Grid.ColumnSpan="2">
  <xuni:FlexPie.Legend >
    <chartcore:ChartLegend BorderColor="#00C7CC" BorderWidth="2" BackgroundColor="#DDF9EC"
     LabelFont="12" LabelTextColor = "#022A31" Position="Bottom">
    </chartcore:ChartLegend>
  </xuni:FlexPie.Legend>
</xuni:FlexPie>