Legend

You can select where and how to display the legend by setting the Position property of the legend. To hide the legend, set the Position property to None. You can also set the BorderColor, BorderWidth, BackgroundColor and LabelFont properties to customize the legend.

Setting the LegendToggle property to true lets you toggle the visibility of any series by clicking its corresponding legend item.

The image below shows how the FlexChart 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 Customize Appearance section.

In Code

C#	Copy Code
chart.Legend.BorderColor = Color.FromHex("#0CA8B2"); chart.Legend.BorderWidth = 2; chart.Legend.BackgroundColor = Color.FromHex("#EEFCF5"); chart.Legend.LabelTextColor = Color.FromHex("#0CA8B2"); chart.Legend.LabelFont = Font.OfSize("monospace", 12); chart.Legend.LabelTextColor = Color.FromHex("#355358"); chart.LegendToggle = true; chart.Legend.Position = Xuni.Xamarin.ChartCore.ChartPositionType.Top;

Copy Code

chart.Legend.BorderColor = Color.FromHex("#0CA8B2");
chart.Legend.BorderWidth = 2;
chart.Legend.BackgroundColor = Color.FromHex("#EEFCF5");
chart.Legend.LabelTextColor = Color.FromHex("#0CA8B2");
chart.Legend.LabelFont = Font.OfSize("monospace", 12);
chart.Legend.LabelTextColor = Color.FromHex("#355358");
chart.LegendToggle = true;
chart.Legend.Position = Xuni.Xamarin.ChartCore.ChartPositionType.Top;

In XAML

To customize the legend in XAML, include the reference to the assembly Xuni.Xamarin.ChartCore, 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.FlexChart;assembly=Xuni.Xamarin.FlexChart" 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.FlexChart;assembly=Xuni.Xamarin.FlexChart"
xmlns:chartcore="clr-namespace:Xuni.Xamarin.ChartCore;assembly=Xuni.Xamarin.ChartCore">

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

XAML	Copy Code
<xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name" PlotAreaBackgroundColor="#F6FDFA" BorderColor="#0CA8B2" BorderWidth = "10" LegendToggle="true"> <xuni:FlexChart.Series> <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" Color="#7278B2" BorderColor="#2D3047" BorderWidth="3"> </xuni:ChartSeries> <xuni:ChartSeries x:Name="Expenses2014" Name="2014 Expenses" Binding="Expenses" Color="#FAA9B4" BorderColor="#F6546A" BorderWidth="3"> </xuni:ChartSeries> </xuni:FlexChart.Series> <xuni:FlexChart.Legend > <chartcore:ChartLegend BorderColor ="#0CA8B2" BorderWidth="2" BackgroundColor="#EEFCF5" LabelFont="12" LabelTextColor="#355358" Position="Top"> </chartcore:ChartLegend> </xuni:FlexChart.Legend> </xuni:FlexChart>

XAML

Copy Code

   <xuni:FlexChart x:Name="chart" ChartType="Column" ItemsSource="{Binding Data}" BindingX="Name"
PlotAreaBackgroundColor="#F6FDFA" BorderColor="#0CA8B2" BorderWidth = "10" LegendToggle="true">
     <xuni:FlexChart.Series>
       <xuni:ChartSeries x:Name="Sales2014" Name="2014 Sales" Binding="Sales" Color="#7278B2" BorderColor="#2D3047" BorderWidth="3">
       </xuni:ChartSeries>
       <xuni:ChartSeries x:Name="Expenses2014" Name="2014 Expenses" Binding="Expenses" Color="#FAA9B4" BorderColor="#F6546A" BorderWidth="3">
       </xuni:ChartSeries>
     </xuni:FlexChart.Series>
     <xuni:FlexChart.Legend >
       <chartcore:ChartLegend BorderColor ="#0CA8B2" BorderWidth="2" BackgroundColor="#EEFCF5"
        LabelFont="12" LabelTextColor="#355358" Position="Top">
       </chartcore:ChartLegend>
     </xuni:FlexChart.Legend>
   </xuni:FlexChart>