This tutorial shows you how to fully customise the legend appearance by changing the LegendModifier.LegendItemTemplate and LegendModifier.LegendTemplate properties. For a documentation article please see Legend Modifier.

Introduction

Chart Legend in SciChart is created by LegendModifier. It also exposes API to configure the default Chart Legend and can act as a data-source for a Custom Legend.

Customizing Legend Items

Legend Items can be customized via the LegendModifier.LegendItemTemplate property. DataContext for each Legend Item is a SeriesInfo object which represent a corresponding RenderableSeries. You can check the SciChart.Charting.Model.ChartData Namespace for a list of all the SeriesInfo types.

<!-- May be set to the LegendModifier.LegendItemTemplate property -->
<!-- Allows per legend item styling. For instance, this template includes the VisibilityCheckbox, point marker and series name textblock-->
<!-- Each item is bound to a SeriesInfo. If you look at our docs on SeriesInfo you will see all the possibilities, including direct access to SeriesInfo.RenderableSeries -->
<DataTemplate x:Key="SciChartLegendItemTemplate" DataType="s:SeriesInfo">
   <Grid>
      <Grid.ColumnDefinitions>
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
         <ColumnDefinition Width="Auto" />
      </Grid.ColumnDefinitions>

      <CheckBox Width="16" Margin="5,0,0,0"
         HorizontalAlignment="Left"
         VerticalAlignment="Center"
         IsChecked="{Binding RenderableSeries.IsVisible, Mode=TwoWay}"
         Visibility="{Binding LegendData.ShowVisibilityCheckboxes, RelativeSource={RelativeSource AncestorType=visuals:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

      <r:PointMarker Grid.Column="1" Margin="5,0,0,0" Width="40" Height="10" VerticalAlignment="Center" HorizontalAlignment="Center"
                  DataContext="{Binding RenderableSeries}"
                  DeferredContent="{Binding LegendMarkerTemplate}"
                  Visibility="{Binding ShowSeriesMarkers, RelativeSource={RelativeSource AncestorType=visuals:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

      <TextBlock Margin="5,0,5,0"
         Grid.Column="2"
         HorizontalAlignment="Left"
         Text="{Binding SeriesName}" />

   </Grid>
</DataTemplate>

Customizing Chart Legend

To specify how the Legend appears, you can provide a custom template via the LegendModifier.LegendTemplate property.The default Legend is of the SciChartLegend type. Use the following code to change how the auto-generated legend is instantiated:

Templating the SciChartLegend Control	
 <s:LegendModifier x:Name="legendModifier" ShowLegend="True" Orientation="Horizontal" Margin="10" >
   <s:LegendModifier.LegendTemplate>
      <ControlTemplate>
         <!-- Change the AutoGenerated SciChartLegend -->
         <s:SciChartLegend ItemTemplate="{Binding LegendItemTemplate}"
            LegendData="{Binding LegendData}"
            Orientation="{Binding Orientation}"
            ScrollViewer.HorizontalScrollBarVisibility="{Binding Path=(ScrollViewer.HorizontalScrollBarVisibility)}"
            ScrollViewer.VerticalScrollBarVisibility="{Binding Path=(ScrollViewer.VerticalScrollBarVisibility)}"
            ShowSeriesMarkers="{Binding ShowSeriesMarkers}"
            ShowVisibilityCheckboxes="{Binding ShowVisibilityCheckboxes}" />
      </ControlTemplate>
   </s:LegendModifier.LegendTemplate>
</s:LegendModifier>

Creating a Custom Legend Directly

Optionally, a Custom Legend can be provided. You can use the SciChartLegend type for this, as it is described below. 

First, the default Legend has to be disabled. For this, set the LegendModifier.ShowLegend property to False. Then, create a custom Legend and bind it to the LegendModifier.LegendData (or LegendModifier.SeriesData) collection of SeriesInfo.

The SciChartLegend control extends the ItemsControl. By default, the SciChartLegend.ItemsPanel is StackPanel with vertical orientation. Very often people want to change the orientation of the legend, so for convenience the SciChartLegend.Orientation property controls the items stacking order. What if you wanted to show legend items in a WrapPanel or other custom panel though?

It is possible to change the SciChartLegend.ItemsPanel via the corresponding ItemsPanel property inherited from the ItemsControl. Here is an example in XAML:

<!--  Declare the LegendModifier  -->
<SciChart:SciChartSurface.ChartModifier>
    <SciChart:ModifierGroup>
        <SciChart:LegendModifier x:Name="legendModifier" GetLegendDataFor="AllSeries" />
    </SciChart:ModifierGroup>
</SciChart:SciChartSurface.ChartModifier>

And the Legend control, defined as below:

<!--  Declare the SciChartLegend bound to the LegendModifier  -->
<SciChart:SciChartLegend x:Name="legendControl"
                         Margin="23,23"
                         Orientation="Horizontal"
                         LegendData="{Binding LegendData, ElementName=legendModifier}" >
    <SciChart:SciChartLegend.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapPanel Width="170" Orientation="{Binding Orientation, RelativeSource={RelativeSource AncestorType=SciChart:SciChartLegend}}" />
        </ItemsPanelTemplate>
    </SciChart:SciChartLegend.ItemsPanel>
</SciChart:SciChartLegend>

Further Reading

For further information, please see our documentation:

• LegendModifier API
• SeriesInfo – the ViewModels for Tooltips and Legends
• Tutorial - Custom Legend with Color Picker and Custom Point Markers

An example that demoes Chart Legends can be found in SciChart Examples Suite as Chart Legends API.