FlexChart | ComponentOne
FlexPie / Legend
In This Topic
    Legend
    In This Topic

    Legend displays an entry for each data series in the chart. It allows you to identify the corresponding data represented in charts. In FlexPie, you can customize the legend of charts in various ways. For example, you can change the orientation and position of legends. Let us understand them in detail:

    The following code snippet shows how to set the property.

    <Grid>
    
        <Chart:C1FlexPie 
            x:Name="flexPie" 
            InnerRadius="0.5"
            Offset="0.5"
            Header="Fruit Sales Data"
            Footer="2015"
            LegendOrientation="Horizontal"
            LegendPosition="Bottom"
            SelectionMode="Point" 
            SelectedItemPosition="Top"
            SelectedItemOffset="2"
            Margin="95,99,328,275" 
            Binding="April" 
            BindingName="Fruit" 
            ItemsSource="{Binding DataContext.Data}">
            <Chart:C1FlexPie.SelectionStyle>
                <Chart:ChartStyle Stroke="Red" 
                                  StrokeThickness="2"/>
            </Chart:C1FlexPie.SelectionStyle>
            <Chart:C1FlexPie.DataLabel>
                <Chart:PieDataLabel Content="{}{y}"/>
            </Chart:C1FlexPie.DataLabel>
        </Chart:C1FlexPie>
    </Grid>
    
    C#
    Copy Code
    flexPie.LegendOrientation = C1.Chart.Orientation.Horizontal;
    flexPie.LegendPosition = C1.Chart.Position.Bottom;
    

    Legend Formatting

    Each legend label should be concise and descriptive, clearly indicating the category or data points it represents. FlexPie allow you to format such legend items using the LegendItemFormat event provided by the FlexChartBase class.

    The following image displays FlexPie with the formatted legend labels.

    The following code snippet shows how the legend labels are formatted.

    C#
    Copy Code
    flexPie.LegendItemFormat += (s, e) =>
    {
        var data = (FruitDataItem)e.Item;
        e.Text = $"{data.April}={data.Fruit}";
    };