WPF Charting Documentation - SciChart WPF Charts SDK v8.x
SciChart WPF 2D Charts > ChartModifier API > Cursors, Tooltips and legends > TernaryChartModifiers > Ternary Legend Modifier
Ternary Legend Modifier

Ternary chart has a customisable legend API which is based on TernaryChartModifierBase API. To add a Legend to a chart, you need two elements – a TernaryLegendModifier – which is the datasource, and a SciChartLegend, or ItemsControl, to show the data.             

 

The TernaryLegendModifier is demonstrated in the example 2D Charts > Create a Ternary Chart > Error Bar Series TernaryChart

SciChart legends support the following:

  • Placement of legend Top, Left, Right, Bottom, Inside the chart
  • Auto-creation of Legend UI and binding to Legend Data Source via the LegendModifier.
  • Horizontal or Vertical orientation of Legends
  • Showing SeriesName, Line Color/Marker, Visibility Checkboxes
  • Templating of Legend Items to allow full customization of the legend including adding color-pickers or other controls
  • Placing legends anywhere in your application

 

Showing a Legend with ShowLegend=True

The simplest way to declare a legend is to declare a TernaryLegendModifier and set TernaryLegendModifier.ShowLegend=True. This will autocreate a SciChartLegend control and place it inside the chart automatically.

XAML

Showing a Legend with ShowLegend=True
Copy Code 
<!-- where xmlns:s="http://schemas.abtsoftware.co.uk/scichart" -->
<s:SciChartTernarySurface>
    <s:SciChartTernarySurface.ChartModifier>
        <s:TernaryModifierGroup>
            <s:TernaryLegendModifier Margin="10"
                                     Orientation="Vertical"
                                     ShowLegend="True" />
        </s:TernaryModifierGroup>
    </s:SciChartTernarySurface.ChartModifier>
</s:SciChartTernarySurface>

Code

Showing a Legend with ShowLegend=True
Copy Code 
 var sciChartTernarySurface = new SciChartTernarySurface
{
    ChartModifier = new TernaryModifierGroup(new TernaryLegendModifier
    {
        Margin = new Thickness(10),
        Orientation = Orientation.Vertical,
        ShowLegend = true
    })
};

Placing the Auto-Generated Legend Inside, Outside the SciChartSurface

When using auto-generated legends (when TernaryLegendModifier.ShowLegend = true), you can place the legend Inside, Outside, Left, Top, Right, Bottom on the SciChartTernarySurface by using the TernaryLegendModifier.LegendPlacement property. Note that the legend placement can also be adjusted with the TernaryLegendModifier.Margin property.

Showing only Visible or only Selected series in the Auto-Generated Legend

You can change which series the Legend displays data for by using the TernaryLegendModifier.GetLegendDataFor property.

Showing a Horizontal Auto-Generated Legend

You can change the orientation of the legend from Vertical to Horizontal by using the TernaryLegendModifier.Orientation property.

Showing or Hiding the Visibility Checkboxes in an Auto-Generated Legend

Visibility Checkboxes can be hidden in the SciChartLegend control by setting TernaryLegendModifier.ShowVisibilityCheckboxes=False.

Showing or Hiding Scrollbars in the Legend Control

With the following code you can show or hide Scrollbars in the legend

Showing or Hiding Scrollbars in the Legend Control
Copy Code 
<s:TernaryLegendModifier ShowLegend="True" 
ScrollViewer.HorizontalScrollBarVisibility="Auto" 
ScrollViewer.VerticalScrollBarVisibility="Auto"/>

Templating the Legend Item Rows

You may template the Legend Item Rows by using the TernaryLegendModifier.LegendItemTemplate property. This accepts a simple DataTemplate. The binding for each Legend Item Row is to type SeriesInfo. You can see an example of using LegendItemTemplate below:

Templating the Legend Item Rows
Copy Code 
 <!--  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=s:SciChartLegend},
                                       Converter={StaticResource BooleanToVisibilityConverter}}" />
 
        <s:PointMarker Grid.Column="1"
                       Width="40"
                       Height="10"
                       Margin="5,0,0,0"
                       HorizontalAlignment="Center"
                       VerticalAlignment="Center"
                       DataContext="{Binding RenderableSeries}"
                       DeferredContent="{Binding LegendMarkerTemplate}"
                       Visibility="{Binding ShowSeriesMarkers,
                                            RelativeSource={RelativeSource AncestorType=s:SciChartLegend},
                                            Converter={StaticResource BooleanToVisibilityConverter}}" />
 
        <TextBlock Grid.Column="2"
                   Margin="5,0,5,0"
                   HorizontalAlignment="Left"
                   Text="{Binding SeriesName}" />
 
    </Grid>
</DataTemplate>

Templating the SciChartLegend Control

When the legend is AutoGenerated, you cannot access the legend instance. But you can specify how it is created. Use the following code to change how the auto-generated legend is instantiated.

Templating the SciChartLegend Control
Copy Code 
<s:TernaryLegendModifier x:Name="ternaryLegendModifier"
                         Margin="10"
                         Orientation="Horizontal"
                         ShowLegend="True">
    <s:TernaryLegendModifier.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:TernaryLegendModifier.LegendTemplate>
</s:TernaryLegendModifier>

Alternatively – Binding TernaryLegendModifier.LegendData to SciChartLegend

You can alternatively bind TernaryLegendModifier.LegendData to a SciChartLegend and place anywhere in your application. You can also bind to a TernaryLegendModifier.LegendData to an ItemsControl.ItemsSource and template it as you wish.

Alternatively – Binding TernaryLegendModifier.LegendData to SciChartLegend
Copy Code 
<s:SciChartTernarySurface x:Name="sciChart" s:ThemeManager.Theme="Chrome">
    <!--  Declare ChartModifiers  -->
    <s:SciChartTernarySurface.ChartModifier>
        <s:TernaryModifierGroup>
            <s:TernaryLegendModifier x:Name="ternaryLegendModifier" GetLegendDataFor="AllSeries" />
        </s:TernaryModifierGroup>
    </s:SciChartTernarySurface.ChartModifier>
</s:SciChartTernarySurface>
<!-  Somewhere else in your application, you can declare a SciChartLegend and bind to LegendModifier.LegendData  -->
Alternatively – Binding TernaryLegendModifier.LegendData to SciChartLegend
Copy Code 
<s:SciChartLegend x:Name="legendControl"
                  Margin="23,23"
                  s:ThemeManager.Theme="Chrome"
                  LegendData="{Binding LegendData,
                                       ElementName=ternaryLegendModifier,
                                       Mode=OneWay}"
                  ScrollViewer.HorizontalScrollBarVisibility="Auto"
                  ScrollViewer.VerticalScrollBarVisibility="Auto"
                  ShowVisibilityCheckboxes="True" />

The ControlTemplate for the SciChartLegend control

The auto-generated SciChartLegend control is simply an ItemsControl. The default Control Template for the SciChartLegend is included below:

 

The ControlTemplate for the SciChartLegend control
Copy Code 
<ControlTemplate TargetType="s:SciChartLegend">
    <Border HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
            VerticalAlignment="{TemplateBinding VerticalAlignment}"
            Background="{TemplateBinding Background}"
            BorderBrush="{TemplateBinding BorderBrush}"
            BorderThickness="{TemplateBinding BorderThickness}"
            Padding="{TemplateBinding Padding}">
        <ScrollViewer s:CompatibleFocus.IsFocusable="False"
                      HorizontalScrollBarVisibility="{Binding (ScrollViewer.HorizontalScrollBarVisibility),
                                                              RelativeSource={RelativeSource TemplatedParent}}"
                      VerticalScrollBarVisibility="{Binding (ScrollViewer.VerticalScrollBarVisibility),
                                                            RelativeSource={RelativeSource TemplatedParent}}">
            <ItemsPresenter />
        </ScrollViewer>
    </Border>
</ControlTemplate>