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

1 vote
122 views

I have created the following style for my charts legend:

   <Style  TargetType="{x:Type s:SciChartLegend}">
        <Setter Property="Background" Value="DarkGray"/>
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate DataType="{x:Type s:XyzSeriesInfo}">
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto" />
                            <ColumnDefinition Width="Auto" />
                        </Grid.ColumnDefinitions>
                        <Ellipse Grid.Column="0" 
                              VerticalAlignment="Center"
                              Stretch="Fill"
                              Width="40"
                              Height="40"
                              StrokeThickness="3"
                              Stroke="{Binding ????, Converter={StaticResource SlitValveToBrushConverter}}" />
                        <TextBlock Grid.Column="1"
                                   Margin="5,0,10,0"
                                   HorizontalAlignment="Center"
                                   Text="{Binding SeriesName}" />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

I want to bind the Stroke of my ellipse to the Z Value (the string part) of my DataSeries (property is called ChartItems) which is of type XyzDataSeries3D<DateTime, int, string>

How can I bind to the Z Value?

1 vote
180 views

I managed to spearate the legend from the SciChartSurface, however the way I did it is very hackish. I couldn’t find any documentation on how it is supposed to be done correctly.

The way I did it (Kotlin code):

val legend = SciChartLegend(context)
legendModifier = LegendModifier(legend)
legendModifier.setOrientation(Orientation.VERTICAL)
legendModifier.setLegendPosition(Gravity.START or Gravity.TOP, 0)
legendModifier.setSourceMode(SourceMode.AllVisibleSeries)
legendModifier.setShowSeriesMarkers(true)
legendModifier.setShowCheckboxes(true)


val modifierGroup = chartBuilder.newModifierGroup().build()
modifierGroup.childModifiers.add(legendModifier)
chartSurface.chartModifiers.add(modifierGroup)

if(legend.parent != null)
{
    (legend.parent as ViewGroup).removeView(legend)
}

val linearLayout = LinearLayout(context)
linearLayout.orientation = LinearLayout.VERTICAL
linearLayout.addView(legend)
linearLayout.addView(chartSurface)

I was surprised that passing the legend to LegendModifier constructor also adds it to it’s layout. So I had to manually remove it and add it to my LinearLayout. It does work, but as I said, it is a hackish way of doing it. My question is, how is it done correctly?

0 votes
248 views

i currently place my custom (templated) legend inside the Scichartsurface (via xaml).

How can I offer the feature to drag the legend with the mouse to any location on the surface? Please note that I also use mouse movements and clicks for several chart modifiers so most likely I would have to check whether the mouse is hovering over the legend when a left mouse click event is raised?

Could you please get me started with some ideas or thoughts as I am not sure how to approach this issue.

Thanks

  • bbmat asked 6 months ago
  • last active 5 months ago
0 votes
335 views

I have a legend modifier and I’m trying to set the max height like this:

<s:LegendModifier ShowLegend="True" Orientation="Vertical" LegendPlacement="Inside"
    ScrollViewer.HorizontalScrollBarVisibility="Auto"
    ScrollViewer.VerticalScrollBarVisibility="Auto"
    MaxHeight="165" />

However the setting has no effect on the max height. Is there somewhere else I need to set this? Thank you.

  • Andy K asked 9 months ago
  • last active 8 months ago
0 votes
0 answers
409 views

I am working with Wpf on window.

I have defined a legend modifier with a template.

<s:ModifierGroup>
                    <s:LegendModifier
                        ShowLegend="True"
                        Orientation="Horizontal"
                        Margin="20"
                        LegendPlacement="Inside"
                        LegendItemTemplate="{DynamicResource TopDownLegendTemplate}"
                        GetLegendDataFor="AllSeries"
                        ShowVisibilityCheckboxes="True"/>
                </s:ModifierGroup>

Always, when the chart is rendered, the legend is not (see legendOff.PNG)

Most times, after some chart updates (e.g by moving a slider that affects the data displayed), the legend comes back on (see legendOn.PNG)

Always, when the legend is rendered, then it will stay rendered.

A similar code is elsewhere in my project and does not give this problem so I can’t say for sure it is a bug. It certainly is an unexpected behavior.

Another piece of useful information is that my template uses a converter in the xaml code. I have put a breakpoint in this converter and verified the code is not being called (hence nothing is trying to render the legend) when the chart is rendered.

Any idea?

0 votes
510 views

I followed this post http://support.scichart.com/index.php?/Knowledgebase/Article/View/17244/39/tutorial—custom-legend-with-color-picker-and-custom-point-markers for creating a custom Chart Legend and it worked great. One feature of it that I really liked was the checkbox behavior: CheckedChangeZoomExtentsBehaviour.EnableZoomExtentsOnChecked=”True” which zooms the chart to extents everytime you show or hide a series.

This checkbox behavior breaks when I move the Legend outside of the chart, which I accomplished by following this post: https://www.scichart.com/questions/question/moving-legend-outside-sci-chart-plots

How can I keep this checkbox behavior when moving the Legend outside of the Chart area?

Note: if I set ShowLegend=”True” in my s:LegendModifie> tag, the behavior properly works with the legend outside the Chart area, but now I have duplicate legends both inside and outside my chart area with this setting set.

<!-- LEGEND_ITEM_TEMPLATE -->
<DataTemplate x:Key="LegendItemTemplate" DataType="s:SeriesInfo">
            <!-- DataContext is of type SeriesInfo -->
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="*" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                    <ColumnDefinition Width="Auto" />
                </Grid.ColumnDefinitions>

                <!-- Visibility checkbox, bound to SeriesInfo.RenderableSeries.IsVisible -->
                <CheckBox Margin="5,0,0,0"
                    HorizontalAlignment="Left"
                    VerticalAlignment="Center"
                    behaviors:CheckedChangeZoomExtentsBehaviour.EnableZoomExtentsOnChecked="True"
                    Foreground="{StaticResource LegendTextBrush}"
                    IsChecked="{Binding RenderableSeries.IsVisible, Mode=TwoWay}"
                    Visibility="{Binding LegendData.ShowVisibilityCheckboxes, RelativeSource={RelativeSource AncestorType=s:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

                <s: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=s:SciChartLegend}, Converter={StaticResource BooleanToVisibilityConverter}}" />

                <!-- Series Name, bound to SeriesInfo.SeriesName -->
                <TextBlock Margin="5,0,5,0"
            Grid.Column="2"
            HorizontalAlignment="Left"
            Foreground="{StaticResource LegendTextBrush}"
            Text="{Binding SeriesName}" />
            </Grid>
        </DataTemplate>

<!-- LEGEND MODIFIER -->
    <s:LegendModifier x:Name="ChartLegend" ShowLegend="True" GetLegendDataFor="AllSeries" LegendItemTemplate="{StaticResource LegendItemTemplate}" ShowVisibilityCheckboxes="True"   />

<!-- MY LEGEND CONTROL ELSEWHERE ON THE PAGE -->
<s:SciChartLegend x:Name="legendControl" DockPanel.Dock="Top"
                                       Orientation="Horizontal" Margin="10"


                                       ScrollViewer.HorizontalScrollBarVisibility="Auto"
                                       ScrollViewer.VerticalScrollBarVisibility="Auto"
                                       LegendData="{Binding LegendData, ElementName=ChartLegend, Mode=OneWay}"
                                       ShowVisibilityCheckboxes="True" />           
0 votes
1k views

I am working on an application where I have multiple XY data series. For one of the series, we are producing annotation data for some of the points. There are 8 different types of annotations that can be created. Based on the response you gave to a previous question, I am creating the annotations as separate data series instead of as actual annotation objects since there are thousands of them. Performance starts to suffer as the number of annotations increases.

The issue I’m running into now is the number of series is now 14 which is unwieldy for displaying in a legend. My current legend is horizontally oriented as shown in the attached image. I would prefer that the user not have to scroll to view all of the legend items and am trying to figure out how to achieve that.

Is there a way to specify a fixed width for the legend and have items wrap to a new line if there is not enough room for them? I didn’t see that as being an option for the standard legend template.

Also, is there a way to use multiple legends for a chart? Ideally it would be nice to split the series that are associated with annotation data into their own legend instead of mixing them in with the legend for the normal data. The SeriesInfo object doesn’t appear to have any property that would allow me to categorize the data.

Thanks,
Scott

  • sdamge asked 2 years ago
  • last active 2 years ago
1 vote
3k views

I am trying to change the background color to match the background of the SciChartSurface but it just doesn’t want to change colors. I have a property bound to enable and disable the legend and that works fine. I tried doing the same for the “Background” property for SciChartLegend but nothing works. Even hard coding a brush doesn’t work. What am I missing?

I am using SciChart v3.42.0.6778

SciChartSurface instantiation in XAML. I am using the BrightSpark default theme.

<s:SciChartSurface Name="SciChartSurface"
Grid.Row="0"
Background="{Binding BackgroundColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
ChartTitle="{Binding GraphTitle}"
SeriesSource="{Binding GraphRenderModels}"
s:ThemeManager.Theme="BrightSpark">

Modifiers

<s:SciChartSurface.ChartModifier>
<s:ModifierGroup>
    <s:RubberBandXyZoomModifier IsAnimated="True"
                                IsEnabled="True"
                                IsXAxisOnly="False"
                                RubberBandFill="#99AAAAAA"
                                ZoomExtentsY="False" />
    <s:ZoomPanModifier ExecuteOn="MouseMiddleButton" IsEnabled="True" />
    <s:ZoomExtentsModifier ExecuteOn="MouseDoubleClick"
                           IsEnabled="True"
                           XyDirection="XDirection" />
    <s:MouseWheelZoomModifier IsEnabled="True" XyDirection="YDirection" />
    <s:YAxisDragModifier AxisId="LeftAxis" />
    <s:YAxisDragModifier AxisId="RightAxis" />
    <s:XAxisDragModifier ClipModeX="None" />
    <s:CursorModifier Name="CursorModifier" IsEnabled="{Binding ShowCursors, Mode=TwoWay}">
        <s:CursorModifier.LineOverlayStyle>
            <Style TargetType="Line">
                <Setter Property="Stroke" Value="LightGray" />
            </Style>
        </s:CursorModifier.LineOverlayStyle>
    </s:CursorModifier>
    <s:LegendModifier Margin="6"
                      GetLegendDataFor="AllSeries"
                      LegendPlacement="Inside"
                      Orientation="Horizontal"
                      ShowLegend="{Binding ShowLegend}"
                      ShowVisibilityCheckboxes="False" />
</s:ModifierGroup>

</s:SciChartSurface.ChartModifier>

When I attempt to change the background, I use the following:

<s:LegendModifier Margin="6"
GetLegendDataFor="AllSeries"
LegendPlacement="Inside"
Orientation="Horizontal"
    Background="{Binding BackgroundColor, Converter={StaticResource ColorToSolidColorBrushConverter}}"
ShowLegend="{Binding ShowLegend}"
ShowVisibilityCheckboxes="False" />

Which doesn’t work, though other color bindings in XAML work fine. If I change the color directly, say Background=”Red” or Background=”#FF0000″ It does not change either.

  • Alex Helms asked 2 years ago
  • last active 2 years ago
1 vote
4k views

How can i wrap legend? if legend width is out of window.

  • Raghupathy asked 3 years ago
  • last active 3 years ago
1 vote
0 answers
4k views

Hi,

I think I have found a bug. If LegendModifier has Margin (i.e. 10) it forces ModifierGroup to grow to VisibleWidth/Height 20×20. Than you can clearly see that the modifier group is placed outside the “chart area” and creates additional “topleft margin”.

Setting Grid.Row=”3″ and Grid.Column=”2″ on ModifierGroup looks like a fix.

Thanks

1 vote
4k views

I am dynamically adding and removing items from an observablecollection of Irenderable series in my viewmodel, and binding it to the renderableseries on the chart surface. However, when I add and remove items that I want to be ordered, and are appropriately ordered in the collection, they are not ordered on the legend.

Is there a way to reorder the series in the legend (MVVM solution would be great)?

You can replicate the issue (or the symptom), by toggling the visibilty of the series in the below example by clicking the checkbox within the legend and then switching the getlegenddatafrom to visible series, and then switch back. (no longer in ABC order).

https://www.scichart.com/Abt.Controls.SciChart.SL.ExampleTestPage.html#/Abt.Controls.SciChart.Example;component/Examples/IWantTo/CreateMultiseriesChart/MultipleLinesView.xaml

Thanks,
Jason

  • morseja asked 3 years ago
  • last active 3 years ago
1 vote
6k views

how can i apply styling for legend in legend modifier? i want to apply the following style

<Style x:Key="LegendStyle" TargetType="s:LegendModifier">
        <Setter Property="ContentTemplate">
            <Setter.Value>        
                <DataTemplate>
            <s:SciChartLegend  x:Name="legendControl"  Margin="2,2" Orientation="Horizontal"  Background="Transparent" BorderThickness="0" ScrollViewer.VerticalScrollBarVisibility="Auto"
                                Visibility="{Binding IsLegendVisible,Converter={StaticResource  BoolToVisibilityConverter}}" 
                                LegendData="{Binding LegendData,  ElementName=legendModifier,Mode=OneWay}">

                <s:SciChartLegend.Resources>
                    <SciChart:ColorToBrushConverter x:Key="ColorToBrushConverter"/>
                </s:SciChartLegend.Resources>
                <s:SciChartLegend.ItemTemplate>
                    <DataTemplate DataType="SciChart:XyzSeriesInfo">
                        <Grid>
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="Auto" />
                                <ColumnDefinition Width="Auto" />
                            </Grid.ColumnDefinitions>
                            <Rectangle Grid.Column="0"
                                                VerticalAlignment="Center"
                                                Stretch="Fill"
                                                Width="10"

                                                StrokeThickness="10"
                                                Stroke="{Binding SeriesColor,
                                                Converter={StaticResource ColorToBrushConverter}}" />
                            <TextBlock Grid.Column="1" Foreground="Black" 
                                                Margin="2,0,15,0"
                                                HorizontalAlignment="Center"
                                                Text="{Binding SeriesName}" FontWeight="Normal"/>
                        </Grid>
                    </DataTemplate>
                </s:SciChartLegend.ItemTemplate>
            </s:SciChartLegend>
        </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
  • Raghupathy asked 3 years ago
  • last active 3 years ago
1 vote
5k views

I have a case where there can be hundreds or even thousands of potential series on the surface.
When I use the LegendModifier, I only see the first 20 or so series.
What would it take to display a scrollbar so that the user can see all available series?
Thanks!

  • dwoerner asked 3 years ago
  • last active 3 years ago
0 votes
0 answers
4k views

Hello,

I need to show a EntitySet in a graph. this EntitySet will have a column called Time. I want to use the Time column on the X-Axis. I then want to show the other columns on the Y-Axis. I furthermore need to filter out the ID and NodeID columns before displaying on the Graph. The user can actually pick what EntitySet they want to graph so I don’t believe I can use XAML code to hard code this…I will need to do this dynamically in C#. I also need to be able to generate something like a Legend and allow the end user to show or hide each of the columns on the Y-Axis. I didn’t see a good example in the demos on what I need to accomplish. An example or some code snippets would greatly be appreciated.
Thanks

—Dave

0 votes
5k views

Hi

Based on some window’s size logic I want an ItemTemplateSelector to set the correct ItemTemplate.
But it doesn’t seem like the SciCharLegend picks up the ItemTemplateSelector, because whatever I put into the ItemTemplates it is totally ignored and only the default is rendered.

public class SciChartLegendTemplateSelector : DataTemplateSelector
{
    public DataTemplate NormalItemTemplate { get; set; }
    public DataTemplate SmallItemTemplate { get; set; }

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        return NormalItemTemplate;
    }
}

<DataTemplate x:Key="SciChartLegendNormalItemTemplate">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="NORMAL"></TextBlock>
    </StackPanel>
</DataTemplate>
<DataTemplate x:Key="SciChartLegendSmallItemTemplate">
    <StackPanel Orientation="Vertical">
        <TextBlock Text="SMALL"></TextBlock>
    </StackPanel>
</DataTemplate>
<templateSelectors:SciChartLegendTemplateSelector x:Key="SciChartLegendTemplateSelector"
                                                  NormalItemTemplate="{StaticResource SciChartLegendNormalItemTemplate}"
                                                  SmallItemTemplate="{StaticResource SciChartLegendSmallItemTemplate}"/>

<s:SciChartLegend x:Name="legendControl"
                  s:ThemeManager.Theme="BrightSpark"
                  VerticalAlignment="Bottom"
                  HorizontalAlignment="Stretch"
                  Background="White"
                  FontSize="10"
                  FontStretch="UltraCondensed"
                  LegendData="{Binding LegendData,
                                       ElementName=legendModifier,
                                       Mode=OneWay}"
                  ShowVisibilityCheckboxes="True"
                  ItemTemplateSelector="{StaticResource SciChartLegendTemplateSelector}">
Showing 15 results
This template supports the sidebar's widgets. Add one or use Full Width layout.
SciChart WPF v5 is here! Use the discount code SCICHARTV5 to get 15% off WPF Charts until December 31st!Read More
+