Class ChartLegend

Represents the legend for the SfCartesianChart, SfCircularChart, SfFunnelChart and SfPyramidChart classes.

Inheritance

System.Object

ChartLegend

Namespace: Syncfusion.Maui.Charts

Assembly: Syncfusion.Maui.Charts.dll

Syntax

public class ChartLegend : Element, IChartLegend, IFloatingLegend, ILegend

Remarks

The items in the legend contain the key information about the ChartSeries. The legend has all abilities such as docking, enabling, or disabling the desired series.

    <chart:SfCartesianChart>

          <chart:SfCartesianChart.Legend>
              <chart:ChartLegend/>
          </chart:SfCartesianChart.Legend>

    </chart:SfCartesianChart>

    SfCartesianChart chart = new SfCartesianChart();
    chart.Legend = new ChartLegend();

Constructors

ChartLegend()

Declaration

public ChartLegend()

Fields

IsFloatingProperty

Identifies the IsFloating bindable property.

Declaration

public static readonly BindableProperty IsFloatingProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

IsVisibleProperty

Identifies the IsVisible bindable property.

Declaration

public static readonly BindableProperty IsVisibleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ItemsLayoutProperty

Identifies the ItemsLayout bindable property.

Declaration

public static readonly BindableProperty ItemsLayoutProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ItemTemplateProperty

Identifies the ItemTemplate bindable property.

Declaration

public static readonly BindableProperty ItemTemplateProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

LabelStyleProperty

Declaration

public static readonly BindableProperty LabelStyleProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

OffsetXProperty

Identifies the OffsetX bindable property.

Declaration

public static readonly BindableProperty OffsetXProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

OffsetYProperty

Identifies the OffsetY bindable property.

Declaration

public static readonly BindableProperty OffsetYProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

PlacementProperty

Identifies the Placement bindable property.

Declaration

public static readonly BindableProperty PlacementProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

ToggleSeriesVisibilityProperty

Identifies the ToggleSeriesVisibility bindable property.

Declaration

public static readonly BindableProperty ToggleSeriesVisibilityProperty

Field Value

Type
Microsoft.Maui.Controls.BindableProperty

Properties

IsFloating

Gets or sets a value indicating whether the legend floats over the chart's plot area.

Declaration

public bool IsFloating { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `False`.

Remarks

When this property is set to true, the legend detaches from its default docking position and can be positioned explicitly by using the OffsetX and OffsetY properties.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCartesianChart>

    <chart:SfCartesianChart.Legend>
        <chart:ChartLegend IsFloating="True"/>
    </chart:SfCartesianChart.Legend>

    <chart:ColumnSeries ItemsSource="{Binding Data}"
                         XBindingPath="Category"
                         YBindingPath="Value"/>
</chart:SfCartesianChart>

SfCartesianChart chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

ChartLegend legend = new ChartLegend()
{
    IsFloating = true,
};

chart.Legend = legend;

ColumnSeries series = new ColumnSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "Category",
    YBindingPath = "Value"
};

chart.Series.Add(series);

IsVisible

Gets or sets a value that indicates whether the legend is visible or not.

Declaration

public bool IsVisible { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `True`

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend IsVisible = "True"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ IsVisible = true };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ItemsLayout

Gets or sets the layout configuration for the items in the chart legend. This property allows you to define how individual legend items are arranged within the legend.

Declaration

public Layout ItemsLayout { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.Layout	It accepts the Microsoft.Maui.Controls.Layoutvalue and its default value is null.

Examples

<chart:SfCircularChart x:Name="chart">
    <chart:SfCircularChart.BindingContext>
           <model:ViewModel/>
    </chart:SfCircularChart.BindingContext>

    <chart:SfCircularChart.Legend>
        <model:LegendExt Placement = "Bottom">
            <chart:ChartLegend.ItemsLayout>
                <FlexLayout WidthRequest = "400" Background="Pink" Wrap="Wrap"/>
            </chart:ChartLegend.ItemsLayout>
        </model:LegendExt>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

 LegendExt legend = new LegendExt();
 legend.Placement = LegendPlacement.Bottom;

 legend.ItemsLayout = new FlexLayout()
 {
   Wrap = Microsoft.Maui.Layouts.FlexWrap.Wrap,
   WidthRequest = 400
 };

 chart.Legend = legend;

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};

chart.Series.Add(series);

    public class LegendExt : ChartLegend
    {
        protected override double GetMaximumSizeCoefficient()
        {
            return 0.5;
        }
    }

ItemTemplate

Gets or sets a template to customize the appearance of each legend item.

Declaration

public DataTemplate ItemTemplate { get; set; }

Property Value

Type	Description
Microsoft.Maui.Controls.DataTemplate	It accepts Microsoft.Maui.Controls.DataTemplate value.

Examples

MainPage.xaml

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend>
           <chart:ChartLegend.ItemTemplate>
               <DataTemplate>
                   <StackLayout Orientation="Horizontal" >
                       <Rectangle HeightRequest="12" WidthRequest="12" Margin="3"
                                  Background="{Binding IconBrush}"/>
                       <Label Text="{Binding Text}" Margin="3"/>
                   </StackLayout>
               </DataTemplate>
           </chart:ChartLegend.ItemTemplate>
       </chart:ChartLegend>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

LabelStyle

Gets or sets the value to customize the appearance of chart legend labels.

Declaration

public ChartLegendLabelStyle LabelStyle { get; set; }

Property Value

Type	Description
ChartLegendLabelStyle	It accepts the ChartLegendLabelStyle value.

Remarks

To customize the legend labels appearance, Create an instance of the ChartLegendLabelStyle class and set to the LabelStyle property.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend>
           <chart:ChartLegend.LabelStyle>
               <chart:ChartLegendLabelStyle TextColor = "Red" FontSize="25"/>
           </chart:ChartLegend.LabelStyle>
       </chart:ChartLegend>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(); 
ChartLegendLabelStyle labelStyle = new ChartLegendLabelStyle()
{
     TextColor = Colors.Red,
     FontSize = 25,
};

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Legend=labelStyle;
chart.Series.Add(series);

OffsetX

Gets or sets the horizontal offset, in device-independent units, applied when the legend is floating.

Declaration

public double OffsetX { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and the default value is `0`.

Remarks

This property is effective only when IsFloating is true. Positive values move the legend to the right, and negative values move it to the left relative to its floating anchor point.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend IsFloating="True"
                            OffsetX="30"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>
</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    IsFloating = true,
    OffsetX = 30
};

PieSeries series = new PieSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "XValue",
    YBindingPath = "YValue"
};

chart.Series.Add(series);

OffsetY

Gets or sets the vertical offset, in device-independent units, applied when the legend is floating.

Declaration

public double OffsetY { get; set; }

Property Value

Type	Description
System.Double	It accepts `double` values and the default value is `0`.

Remarks

This property is effective only when IsFloating is true. Positive values move the legend downward, and negative values move it upward relative to its floating anchor point.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfFunnelChart>

    <chart:SfFunnelChart.Legend>
        <chart:ChartLegend IsFloating="True"
                            OffsetY="-25"/>
    </chart:SfFunnelChart.Legend>

    <chart:FunnelSeries ItemsSource="{Binding Data}"
                        XBindingPath="Category"
                        YBindingPath="Value"/>
</chart:SfFunnelChart>

SfFunnelChart chart = new SfFunnelChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend()
{
    IsFloating = true,
    OffsetY = -25
};

FunnelSeries series = new FunnelSeries()
{
    ItemsSource = viewModel.Data,
    XBindingPath = "Category",
    YBindingPath = "Value"
};

chart.Series.Add(series);

Placement

Gets or sets the placement for the legend in a chart.

Declaration

public LegendPlacement Placement { get; set; }

Property Value

Type	Description
LegendPlacement	It accepts LegendPlacement values and the default value is Top.

Remarks

Legends can be placed left, right, top, or bottom around the chart area.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend Placement = "Right"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ Placement = LegendPlacement.Right };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

ToggleSeriesVisibility

Gets or sets a value indicating whether the chart series visibility by tapping the legend item.

Declaration

public bool ToggleSeriesVisibility { get; set; }

Property Value

Type	Description
System.Boolean	It accepts bool values and the default value is `False`

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
       <chart:ChartLegend ToggleSeriesVisibility = "True"/>
    </chart:SfCircularChart.Legend>

    <chart:PieSeries ItemsSource="{Binding Data}"
                     XBindingPath="XValue"
                     YBindingPath="YValue"/>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();
ViewModel viewModel = new ViewModel();

chart.Legend = new ChartLegend(){ ToggleSeriesVisibility = true };

PieSeries series = new PieSeries()
{
   ItemsSource = viewModel.Data,
   XBindingPath = "XValue",
   YBindingPath = "YValue",
};
chart.Series.Add(series);

Methods

GetMaximumSizeCoefficient()

Used to specify the maximum size coefficient for the chart legend.

Declaration

protected virtual double GetMaximumSizeCoefficient()

Returns

Type	Description
System.Double	It accepts the `double` values and its default value is 0.25.

Remarks

The value must be between 0 and 1.

OnBindingContextChanged()

Declaration

protected override void OnBindingContextChanged()

OnParentChanged()

Declaration

protected override void OnParentChanged()

Events

LegendItemCreated

This event occurs when the legend label is created.

Declaration

public event EventHandler<LegendItemEventArgs> LegendItemCreated

Event Type

Type
System.EventHandler<LegendItemEventArgs>

Remarks

The LegendItemEventArgs contains the information of LegendItem.

Examples

MainPage.xaml
MainPage.xaml.cs

<chart:SfCircularChart>

    <chart:SfCircularChart.Legend>
        <chart:ChartLegend LegendItemCreated="OnLegendLabelCreated" />
    </chart:SfCircularChart.Legend>

</chart:SfCircularChart>

SfCircularChart chart = new SfCircularChart();

ChartLegend legend = new ChartLegend();
legend.LegendItemCreated += OnLegendLabelCreated;
chart.Legend=legend;

private void OnLegendLabelCreated(object sender, LegendItemEventArgs e)
{
     // You can customize the legend item.
}