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


Hi guys,

Yet another Overview question! I have my Overview directly beneath a SciChart. I basically need to do something similar to the SciChartGroup.VerticalChartGroup approach that allows two charts to share a width.

The problem is that the SciChartOverview is not a SciChartSurface so I cannot provide it with a VerticalChartGroup.

I have tried binding the SciChart to a Padding property with a customised Converter that attempts to determine the Padding of the chart as well as the width of the YAxes. The problem with this approach is three-fold:
1) The converter executes before the SciChart has any data and therefore before the YAxis has been given its final size, and
2) The converter won’t be told that the SciChart has raised a NotifiyPropertyChanged, so it will never be called again, and
3) Even after fully loading and rendering with data, the YAxes never have a Width property set (it is always NAN), and I can’t access the ActualWidth property from my code.

How would you recommend I achieve this goal?


  • You must to post comments
Best Answer

Hey miles,

I’m also annoyed by this SciChartOverview width thing, so thanks for your request, it’s prompted me to look into it. Ok – so I managed to get this working by modifying the Xaml for the CreateRealTimeStockChart example like this:

        <s:SciChartSurface x:Name="priceChart">
             <!-- omitted for brevity ... -->

        <!--  Define the Overview control, binding to XVisibleRange, which is shared between this and the SciStockChart control  -->
        <Grid Grid.Row="2" Height="32" >
            <!-- The grid is used to set paddings around the Overview, so that the size of the Overview matches the size of the XAxis on the parent chart -->
                <ColumnDefinition Width="20"/> <!-- Matches parent surface padding left -->
                <ColumnDefinition Width="*"/> <!-- Hosts overview control -->
                <ColumnDefinition Width="{Binding ElementName=priceChart, Path=YAxis.ActualWidth, Mode=OneWay}"/> <!-- Used to bind to parent surface YAxis -->
                <ColumnDefinition Width="15"/> <!-- Matches parent surface padding right -->
            <s:SciChartOverview Grid.Column="1"
                            ParentSurface="{Binding ElementName=priceChart, Mode=OneWay}"
                            s:ThemeManager.Theme="{Binding ElementName=ThemeCombo, Path=SelectedItem}"                           
                            SelectedRange="{Binding XVisibleRange, Mode=TwoWay}" />

The power of binding! Perhaps this ought to go into the SciChartOverview control template in future builds!

Best regards,

  • You must to post comments

To add to Answer’s answer, it appears that SciChart is raising the required changed events when the YAxis’ visible range (and therefore the labels that represent that range and their width) changes, but it doesn’t raise anything if I simply change the visibility of an Axis. So in order to get around this issue, I had to make a slight modification to Andrew’s suggested code that binds to the same flags from the VM that hide the YAxes.


Kind regards,

  • Andrew
    FYI the newsletter mail hasn't gone out yet but v1.5.5.1888 of SciChart is now available on our downloads page, fixes many issues, including some reported by you on the overview. Not all - as we couldn't reproduce some. If you have any more issues just drop me an email, we'll do our best to help Cheers!
  • bstapylton
    Hi Andrew, Thanks for the update - I'll go have a look now. Cheers, Miles
  • You must to post comments
Showing 2 results
Your Answer

Please first to submit.

SciChart WPF v6 BETA released! Note pricing/licensing changes are coming. Contact us to beat the rise!Read more