ComponentOne FlexChart for UWP
FlexChart / Understanding FlexChart / FlexChart Fundamentals / Legend
In This Topic
    Legend
    In This Topic

    The Legend displays an entry for each data series in the chart. It represents the mapping between colors, symbols, and data series.

    In FlexChart, the Legend is set by using the following properties:

    Property Description
    LegendStyle Contains properties that set the style of the legend.
    LegendPosition Determines the position of the legend.

    Legend Style

    FlexChart lets you can customize the Legend using the LegendStyle property provided by the FlexChartBase class.

    The table below lists the properties provided by the ChartStyle class for customizing the Legend:

    Property Description
    Fill Sets the fill color.
    FontFamily Sets the font of the Legend.
    FontSize Sets the font size of the Legend.
    FontStretch Sets the font stretch.
    FontStyle Sets the font style.
    FontWeight Sets the font weight.
    Stroke Sets the stroke color.
    StrokeDashArray Sets the stroke dash array.
    StrokeThickness Sets the stroke thickness.

    Here is the Xaml for setting the property:

    XAML
    Copy Code
    <Chart:C1FlexChart.LegendStyle>
    <Chart:ChartStyle FontFamily="Arial" FontStyle="Italic" Stroke="#FFC29EC4"/>
    </Chart:C1FlexChart.LegendStyle>
    

    Legend Position

    You can use the LegendPosition property to position the Legend relative to the Plot Area, as per your requirements.

    The LegendPosition property can be set to any of the following values:

    Value Description
    Auto Positions the legend automatically.
    Bottom Positions the legend below the plot.
    Left Positions the legend to the left of the plot.
    None Hides the legend.
    Right (default value) Positions the legend to the right of the plot.
    Top Positions the legend above the plot.

    Here is the Xaml for setting the property:

    XAML
    Copy Code
    <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" LegendPosition="Top">
    

    Legend Toggle

    The LegendToggle property of FlexChart class allows you to toggle the visibility of a series in the plot, when you click the series item in the legend. The default value of the LegendToggle property is False. To enable series toggling, you need to set the LegendToggle property to True.

    Here is the Xaml for setting the property:

    XAML
    Copy Code
    <Chart:C1FlexChart x:Name="flexChart" HorizontalAlignment="Left" LegendToggle="True">