Pre loader

Legend customization

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

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

Images
  • You must to post comments
0
0

Hi Scott,

From our SciChart Legend Documentation:

// 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:

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

You can basically configure the SciChartLegend control however you want. I would suggest starting by disabling the Horizontal Scroll by setting LegendModifier.HorizontalScrollBarVisibility.

Next, you could show the legend items in a WrapPanel. From our Knowledgebase:

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

I’d also recommend having a look at our knowledgebase items on legend as we have a lot of content there showing how to customize this flexible control.

  • sdamge
    I followed the suggestion above to create a control that uses a wrap panel. It works great. However, now I have two legends in my view: one defined by the LegendModifier and one defined by “legendControl” as defined above. I’m sorry if I’m missing something simple. How do I just get the defined control to show? Also, I would love it if I could have one control that display 6 of my 14 series and another one that shows the other 8. Is there a way to achieve that? Would that involve creating a custom chart modifier to filter the SeriesInfo objects that are returned? I have spent lots of time digging through all of the knowledgebase items related to legends and have not found anything that lines up with what I’m trying to accomplish unfortunately.
  • Andrew Burnett-Thompson
    Hi Scott, simply set LegendModifier.ShowLegend = false. This will turn off the autogenerated legend, and allow your one that you created to be used. Regarding splitting legends into two, you *could* achieve it. It’s the topic of another question though. LegendModifier.LegendData is a collection of SeriesInfo. You just need to define a rule for filtering this into two collections and consuming via two SciChartLegend controls (or ItemsControls).
  • gareth mitchell
    Hi Scott, I tried it here with v4.0.5 by modifying our SciChart Legend Example. It definitely works. Is the SciChartLegend displayed above the chart (ZIndex?)
  • 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