Pre loader

Horizontal Chart Legend

Welcome to the SciChart Forums!

  • Please read our Question Asking Guidelines for how to format a good question
  • Some reputation is required to post answers. Get up-voted to avoid the spam filter!
  • We welcome community answers and upvotes. Every Q&A improves SciChart for everyone

WPF Forums | JavaScript Forums | Android Forums | iOS Forums

0
0

Hi Guys

We’re adding legends to out charts and would prefer to have horizontal legends rather than vertical ones. We are using data templates for the charts requiring the use of styles for the change rather than doing it programatically.

I had a look at the forum topics on the subject and set up a style with a horizontal stack panel like this

        <Style x:Key="LegendStyle"
               TargetType="{x:Type visuals:SciChartLegend}">
            <Setter Property="BorderBrush"
                    Value="White" />
            <Setter Property="BorderThickness"
                    Value="0" />
            <Setter Property="Background"
                    Value="{DynamicResource ComponentColor}" />
            <Setter Property="VerticalAlignment"
                    Value="Top" />
            <Setter Property="HorizontalAlignment"
                    Value="Left" />
            <Setter Property="Padding"
                    Value="5" />
            <Setter Property="FontSize"
                    Value="12" />
            <Setter Property="Foreground"
                    Value="Black" />
            <Setter Property="FontWeight"
                    Value="Bold" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type visuals:SciChartLegend}">
                        <Border x:Name="PART_Border"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}"
                                Background="{TemplateBinding Background}"
                                HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                                Padding="{TemplateBinding Padding}"
                                VerticalAlignment="{TemplateBinding VerticalAlignment}">
                            <ScrollViewer VerticalScrollBarVisibility="Auto">
                                <ItemsControl x:Name="PART_LegendItems"
                                              BorderThickness="0">
                                    <ItemsControl.ItemsPanel>
                                        <ItemsPanelTemplate>
                                            <StackPanel Orientation="Horizontal" />
                                        </ItemsPanelTemplate>
                                    </ItemsControl.ItemsPanel>
                                    <ItemsControl.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                    <ColumnDefinition Width="Auto" />
                                                </Grid.ColumnDefinitions>
                                                <CheckBox Grid.Column="0"
                                                          HorizontalAlignment="Left"
                                                          IsChecked="{Binding IsVisible, Mode=TwoWay}"
                                                          VerticalAlignment="Center"
                                                          Width="16">
                                                    <CheckBox.Visibility>
                                                        <Binding ElementName="PART_LegendItems"
                                                                 Path="DataContext.ShowVisibilityCheckboxes">
                                                            <Binding.Converter>
                                                                <visuals:BooleanToVisibilityConverter />
                                                            </Binding.Converter>
                                                        </Binding>
                                                    </CheckBox.Visibility>
                                                </CheckBox>
                                                <Rectangle Grid.Column="1"
                                                           HorizontalAlignment="Left"
                                                           Height="10"
                                                           Margin="5,0,20,0"
                                                           VerticalAlignment="Center"
                                                           Width="10">
                                                    <Rectangle.Fill>
                                                        <Binding Path="SeriesColor">
                                                            <Binding.Converter>
                                                                <visuals:ColorToBrushConverter />
                                                            </Binding.Converter>
                                                        </Binding>
                                                    </Rectangle.Fill>
                                                </Rectangle>
                                                <TextBlock Grid.Column="2"
                                                           HorizontalAlignment="Center"
                                                           Text="{Binding SeriesName}" />
                                            </Grid>
                                        </DataTemplate>
                                    </ItemsControl.ItemTemplate>
                                </ItemsControl>
                            </ScrollViewer>
                        </Border>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

With this chart data template

        <DataTemplate x:Key="ChartTemplate">
            <Grid Margin="0"
                  HorizontalAlignment="Stretch"
                  VerticalAlignment="Stretch"
                  Height="Auto">
                <Grid.RowDefinitions>
                    <RowDefinition />
                    <RowDefinition Height="Auto" />
                    <RowDefinition Height="Auto" />
                </Grid.RowDefinitions>
                <visuals:SciChartSurface Grid.Row="0"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Stretch"
                                         Height="400"
                                         x:Name="PriceChart"
                                         SeriesSource="{Binding Path=PriceChartAndOverlaySeries}"
                                         visuals:ThemeManager.Theme="BlackSteel"
                                         visuals:SciChartGroup.VerticalChartGroup="{Binding VerticalGroupID}">
                    <visuals:SciChartSurface.XAxis>
                        <visuals:CategoryDateTimeAxis DrawMajorBands="True"
                                                      DrawMajorGridLines="True"
                                                      DrawMinorGridLines="False"
                                                      DrawMinorTicks="False"
                                                      DrawMajorTicks="True"
                                                      GrowBy="0.0, 0.1"
                                                      LabelFormatter="{Binding ChartAxisLabelFormatter}"
                                                      VisibleRange="{Binding Path=DataContext.SharedXVisibleRange, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type ItemsControl}}, Mode=TwoWay}"
                                                      DrawLabels="True" />
                    </visuals:SciChartSurface.XAxis>
                    <visuals:SciChartSurface.YAxis>
                        <visuals:NumericAxis DrawLabels="True"
                                             DrawMajorBands="False"
                                             DrawMajorGridLines="True"
                                             DrawMinorGridLines="False"
                                             DrawMajorTicks="True"
                                             AutoRange="Always"
                                             GrowBy="0.1, 0.1" />
                    </visuals:SciChartSurface.YAxis>
                    <visuals:SciChartSurface.Annotations>
                        <visuals:TextAnnotation CoordinateMode="Relative"
                                                AnnotationCanvas="BelowChart"
                                                FontSize="72"
                                                FontWeight="Bold"
                                                FontFamily="/Architect.Modules.Surfaces;component/Fonts/#Helvetica Neue LT Com"
                                                Foreground="#22AAAAAA"
                                                Text="{Binding InstrumentName}"
                                                HorizontalAnchorPoint="Center"
                                                VerticalAnchorPoint="Center"
                                                X1="0.5"
                                                Y1="0.5" />
                    </visuals:SciChartSurface.Annotations>
                    <visuals:SciChartSurface.ChartModifier>
                        <visuals:ModifierGroup visuals:MouseManager.MouseEventGroup="{Binding MouseGroupID}">
                            <visuals:RolloverModifier  IsEnabled="{Binding Path=Data.ChartModifier, Source={StaticResource BindingProxy},  Converter={StaticResource IsModifierTypeConverter}, ConverterParameter=Rollover, Mode=TwoWay }"
                                                       ReceiveHandledEvents="True" />
                            <visuals:ZoomPanModifier IsEnabled="{Binding Path=Data.ChartModifier,Source={StaticResource BindingProxy}, Converter={StaticResource IsModifierTypeConverter}, ConverterParameter=ZoomPan , Mode=TwoWay }"
                                                     XyDirection="XDirection"
                                                     ReceiveHandledEvents="True" />
                            <visuals:CursorModifier IsEnabled="{Binding Path=Data.ChartModifier,Source={StaticResource BindingProxy}, Converter={StaticResource IsModifierTypeConverter}, ConverterParameter=CrosshairsCursor, Mode=TwoWay }"
                                                    ReceiveHandledEvents="True"
                                                    ShowAxisLabels="True"
                                                    ShowTooltip="False" />
                            <visuals:RubberBandXyZoomModifier IsEnabled="{Binding Path=Data.ChartModifier,Source={StaticResource BindingProxy}, Converter={StaticResource IsModifierTypeConverter}, ConverterParameter=RubberBandZoom, Mode=TwoWay  }"
                                                              IsXAxisOnly="True"
                                                              IsAnimated="True"
                                                              ReceiveHandledEvents="True" />
                            <visuals:ZoomExtentsModifier ExecuteOn="MouseDoubleClick" />
                            <visuals:LegendModifier x:Name="LegendModifier"
                                                    GetLegendDataFor="AllSeries" />
                        </visuals:ModifierGroup>
                    </visuals:SciChartSurface.ChartModifier>
                </visuals:SciChartSurface>
                <visuals:SciChartLegend x:Name="ChartLegend"
                                        Grid.Row="0"
                                        LegendData="{Binding LegendData, ElementName=LegendModifier, Mode=OneWay}"
                                        ShowVisibilityCheckboxes="False"
                                        Style="{StaticResource LegendStyle}" />
                <uiServices:GridExpander Grid.Row="1"
                                         Margin="0"
                                         BorderBrush="#FF1f282d"
                                         Height="10"
                                         Background="#FF1f282d"
                                         HorizontalAlignment="Stretch"
                                         VerticalAlignment="Center"
                                         IsCollapsed="False"
                                         IsTabStop="False"
                                         Direction="Next"
                                         IsAnimated="False"
                                         ExpanderRowHeight="{Binding ExpanderRowHeight}" />
                <ItemsControl x:Name="IndicatorsContainer"
                              Margin="0"
                              Background="Aqua"
                              ItemsSource="{Binding Path=IndicatorCollection}"
                              ItemTemplate="{StaticResource IndicatorTemplate}"
                              Grid.Row="2">
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Orientation="Vertical">
                                <i:Interaction.Behaviors>
                                    <ei:FluidMoveBehavior AppliesTo="Children"
                                                          Duration="0:0:0.3">
                                        <ei:FluidMoveBehavior.EaseY>
                                            <BackEase EasingMode="EaseOut"
                                                      Amplitude="0.19" />
                                        </ei:FluidMoveBehavior.EaseY>
                                    </ei:FluidMoveBehavior>
                                </i:Interaction.Behaviors>
                            </StackPanel>
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>
                </ItemsControl>
            </Grid>
        </DataTemplate>

Unfortunately the style does not seem to get applied to the legend. Even without the new stackpanel the style is not applied. Without the Style setting in the Legend the legend appears normally but vertically oriented of course.

Any thoughts as to the issue?

Thanks in advance
Regards
Ian

  • You must to post comments
0
0

For expediency I have taken your suggested approach of a Custom Annotation. The XAML works nicely and is below for those who might find it useful.

I do have a question though…

Is it possible when using Relative coordinate mode to place the annotation outside (above) the main chart area?

regards
Ian Carson

                        <visuals:CustomAnnotation CoordinateMode="Relative"
                                                  AnnotationCanvas="AboveChart"
                                                  HorizontalAnchorPoint="Left"
                                                  VerticalAnchorPoint="Top"
                                                  Y1="0"
                                                  X1="0">
                            <visuals:CustomAnnotation.Content>
                                <Border Background="#FF1f282d"
                                        HorizontalAlignment="Left"
                                        VerticalAlignment="Top">
                                    <ItemsControl DataContext="{Binding ElementName=ChartLegendModifier}"
                                                  ItemsSource="{Binding LegendData.SeriesInfo}">
                                        <ItemsControl.ItemsPanel>
                                            <ItemsPanelTemplate>
                                                <StackPanel Orientation="Horizontal" />
                                            </ItemsPanelTemplate>
                                        </ItemsControl.ItemsPanel>
                                        <ItemsControl.ItemTemplate>
                                            <DataTemplate>
                                                <Grid>
                                                    <Grid.ColumnDefinitions>
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                        <ColumnDefinition Width="Auto" />
                                                    </Grid.ColumnDefinitions>
                                                    <Rectangle Grid.Column="1"
                                                               HorizontalAlignment="Left"
                                                               Height="10"
                                                               Margin="5,0,5,2"
                                                               VerticalAlignment="Center"
                                                               Width="10">
                                                        <Rectangle.Fill>
                                                            <Binding Path="SeriesColor">
                                                                <Binding.Converter>
                                                                    <visuals:ColorToBrushConverter />
                                                                </Binding.Converter>
                                                            </Binding>
                                                        </Rectangle.Fill>
                                                    </Rectangle>
                                                    <TextBlock Grid.Column="2"
                                                               HorizontalAlignment="Left"
                                                               Text="{Binding SeriesName}"
                                                               FontSize="11"
                                                               FontFamily="Segoe UI"
                                                               FontWeight="Bold"
                                                               Foreground="White"
                                                               Margin="2,0,5,2" />
                                                </Grid>
                                            </DataTemplate>
                                        </ItemsControl.ItemTemplate>
                                    </ItemsControl>
                                </Border>
                            </visuals:CustomAnnotation.Content>
                        </visuals:CustomAnnotation>
Images
  • Yuriy Zadereckiy
    Hi Ian, Thanks for the update, I'm sure it will be useful for other users. Regarding your question, unfortunately, it is impossible to place annotations outside SciChartSurface. Do you need to place the legend outside? Best regards, Yuriy
  • Ian Carson
    Not outside the SciChartSurface just outside the main chart area. At least I think the position I want is still inside the surface. I have attached a picture to show the position I mean. Thanks & Regards, Ian
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.

Try SciChart Today

Start a trial and discover why we are the choice
of demanding developers worldwide

Start TrialCase Studies