SciChartOverview displaying name of serie | Fast, Native Chart Controls for WPF, iOS, Android and Xamarin

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!

Stackoverflow: SciChart Tag

Hello,

is it possible to display the series name of the series used for the overview chart? In this special case, i have a chart containing many series and it should be configurable which one is selected for the overview chart. The problem is, on the overview chart it is not easily visible which series is displayed, especially if zoomed in.

My last-resort solution would be to place the name of the series over the overview chart manually, but maybe you know a more elegant solution

Thanks,
Robin

WPF

Andreas Mueller-Bluemlein asked 5 years ago

You must login to post comments

Answers (2)

Hello Robin,

It’s not something we support natively, but you may be able to achieve this by re-templating the overview control. For the sake of other posters, here is the control template of the SciChartOverview control. You can adjust this to suit your needs:

<!--  SciChartOverviewControl  -->
    <Style TargetType="SciChart:SciChartOverview">
        <Setter Property="NonSelectedRangeColor" Value="{StaticResource OverviewFillColor}" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SciChart:SciChartOverview">
                    <Grid Name="PART_Container">

                        <SciChart:SciChartSurface x:Name="PART_OverviewControl" Padding="0">
                            <SciChart:SciChartSurface.GridLinesPanelStyle>
                                <Style BasedOn="{StaticResource DefaultGridLinesPanelStyle}" TargetType="SciChart:GridLinesPanel">
                                    <Setter Property="BorderThickness" Value="0" />
                                </Style>
                            </SciChart:SciChartSurface.GridLinesPanelStyle>


                            <SciChart:SciChartSurface.RenderableSeries>
                                <SciChart:FastMountainRenderableSeries />
                            </SciChart:SciChartSurface.RenderableSeries>

                            <SciChart:SciChartSurface.YAxis>
                                <SciChart:NumericAxis AutoRange="True"
                                                      DrawMajorGridLines="False"
                                                      DrawMinorGridLines="False"
                                                      TextFormatting="###E+0"
                                                      Visibility="Collapsed">
                                    <SciChart:NumericAxis.GrowBy>
                                        <SciChart:DoubleRange Max="0.1" Min="0.0" />
                                    </SciChart:NumericAxis.GrowBy>
                                </SciChart:NumericAxis>
                            </SciChart:SciChartSurface.YAxis>

                        </SciChart:SciChartSurface>

                        <StackPanel Name="PART_RangeSliderContainer" Orientation="Horizontal">
                            <Rectangle Name="PART_LeftEdge" />
                            <Thumb Name="PART_LeftThumb" Cursor="SizeWE" />
                            <Thumb Name="PART_MiddleThumb"
                                   Cursor="Hand"
                                   Opacity="0" />
                            <Thumb Name="PART_RightThumb" Cursor="SizeWE" />
                            <Rectangle Name="PART_RightEdge" />
                        </StackPanel>

                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <!--  GridLinesPanel  -->
    <Style x:Key="DefaultGridLinesPanelStyle" TargetType="SciChart:GridLinesPanel">
        <Setter Property="BorderBrush" Value="{StaticResource GridBorderBrush}" />
        <Setter Property="Background" Value="{StaticResource GridBackgroundBrush}" />
        <Setter Property="BorderThickness" Value="1" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="SciChart:GridLinesPanel">
                    <Border Background="{TemplateBinding Background}"
                            BorderBrush="{TemplateBinding BorderBrush}"
                            BorderThickness="{TemplateBinding BorderThickness}">
                        <Border>
                            <Grid>
                                <Canvas Name="PART_HorizontalGridLinesPanel" />
                                <Canvas Name="PART_VerticalGridLinesPanel" />
                            </Grid>
                        </Border>
                    </Border>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

Remember the SciChartOverview binds to a ParentSurface DataSeriesSet and uses DataSeriesIndex to define which series to render. Also the FastMountainRenderableSeries has a DataSeries property which is set internally with the correct dataseries. DataSeries itself has SeriesName.

Sorry its not a complete solution, but hope it points you in the right direction,

Andrew

Andrew answered 5 years ago

- Andreas Mueller-Bluemlein
- 5 years ago
Hi Andrew,thank you for the code snippet, that will help. However, it's not clear to me what to do with the missing resources GridBorderBrush, GridBackgroundBrush and OverviewFillColor. Since all other scichart control are using one theme (e.g. "Chrome"), i guess i have to set the colors accordingly? How do i get these colors, are the argb values available somewhere?Regards, Robin
- Andrew
- 5 years ago
Hi Robin,These are brushes/colors in the themes, there's quite a few of them (and 6 themes). If you want to find out what these colors are, you can use a tool like WPF Snoop to visually debug the Overview control.e.g. you could interrogate the value of NonSelectedRangeColor and the border / lines on the GridLinesPanel like this:For chrome its pretty simple, just these three colors:<SolidColorBrush x:Key="GridBorderBrush" Color="#77333333" /> <SolidColorBrush x:Key="GridBackgroundBrush" Color="Transparent" /> <Color x:Key="OverviewFillColor">#7FD3D3D3</Color>Best regards, Andrew