Xuni FlexChart provides the option to display legend for denoting the type of data plotted on the axes. The position of legend is by default set to "Auto", which means the legend positions itself automatically depending on the real estate available on the device. This allows the chart to efficiently occupy the available space on the device.   

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.

To hide the legend, set the Position property to None. The legend automatically wraps when Position property is set to Top/Bottom, Orientation is set to Horizontal and there is not enough screen real estate.

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

chart.Legend.BorderColor = Color.FromHex("#0CA8B2");
chart.Legend.BorderWidth = 2;
chart.Legend.BackgroundColor = Color.FromHex("#EEFCF5");
chart.Legend.LabelTextColor = Color.FromHex("#0CA8B2");
chart.Legend.LabelTextColor = Color.FromHex("#355358");
chart.LegendToggle = true;
chart.Legend.Position = Xuni.Forms.ChartCore.ChartPositionType.Top; 

In XAML

To customize the legend in XAML, include the reference to the assembly Xuni.Forms.ChartCore, as shown below:

<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.Forms.FlexChart;assembly=Xuni.Forms.FlexChart"
xmlns:chartcore="clr-namespace:Xuni.Forms.ChartCore;assembly=Xuni.Forms.ChartCore">

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

   <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="Sales2015" Name="2015 Sales" Binding="Sales" Color="#7278B2" BorderColor="#2D3047" BorderWidth="3">
       </xuni:ChartSeries>
       <xuni:ChartSeries x:Name="Expenses2015" Name="2015 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>

Copyright © GrapeCity, inc. All rights reserved.