SciChart® the market leader in Fast WPF Charts, WPF 3D Charts, and now iOS Charting & Android Chart Components

Welcome to the SciChart Community Forums!

Please use the forums below to ask questions about SciChart. Take a moment to read our Question asking guidelines on how to ask a good question and our support policy

We also have a tag=SciChart on Stackoverflow.com where you can earn rep for your questions!

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
    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.