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

0
0

Dear all,

I try to align properly the chart overview just below the main chart view port edges. The problem I have is that when we add a legend of a Axes label, then it is fully part of the chart control and alignement gets a bit weird and bad looking. (See picture attached)

How can I adjust the overview chart in order it perfectly fit the main chart view port left and right ?

Thnaks for help

regards

Version
4
Images
WPF
Share
  • sc sc
    Any idea on this ? Is there a way to know the ViewPort Width and bind the overwiew width on it ?
  • You must to post comments
Filter
Sort by: Most Votes
0
0

Our Realtime Ticking Stock Charts example has code to align the overview to the main chart surface.

You can find the example here.

The relevant code is found in CreateRealtimeTickingStockChart.xaml

<!--  This grid is used to space Overview Control so its width matches parent chart XAxis  -->
<Grid Grid.Row="1" Grid.Column="1" 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  -->
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20" />
        <!--  Matches parent surface padding left  -->
        <ColumnDefinition Width="*" />
        <!--  Hosts overview control  -->
        <ColumnDefinition Width="{Binding ActualWidthValue, ElementName=Proxy, Mode=OneWay, Converter={StaticResource DoubleToGridLengthConverter}}" />
        <!--  Used to bind to parent surface YAxis  -->
        <ColumnDefinition Width="15" />
        <!--  Matches parent surface padding right  -->
    </Grid.ColumnDefinitions>
     
    <ext:ActualSizePropertyProxy x:Name="Proxy" Element="{Binding ElementName=PriceChart, Path=YAxis}" />
     
    <!--  Define the Overview control, binding to XVisibleRange, which is shared between this and the SciStockChart control  -->
    <s:SciChartOverview Grid.Column="1" ParentSurface="{Binding ElementName=PriceChart, Mode=OneWay}"
                                        SelectedRange="{Binding XVisibleRange, Mode=TwoWay}"
                                        s:ThemeManager.Theme="{Binding ElementName=ThemeCombo, Path=SelectedItem}" />
</Grid>

Best regards,
Andrew

  • sc sc
    HI Andrew, I have seen in this sample you are referring that you are using SciChartOverview object instead other sample where you have a second ChartSurface with a separate scroolbar. Previously I was using the second solution based on your support email of yesterday and by adding the s:SciChartGroup.VerticalChartGroup property in order to get viewport edges in sync. Then I have tried to use the same way ythat your stock sample, but the probleé is tha same as I get before is that if I have left scale for instance, the view port of the SciChartOverview is not aligned. I have try to add the VerticalChartGroup onto sciChartOverview but it does not accepted. What makes things properly aligned on both viewport? How do you know the padding value it will get when you have left axis visible ?
  • Andrew
    It doesn’t really matter what you put in that Grid Column. The column in the grid does the alignment, not the SciChartOverview. Try replacing it with a coloured rectangle. It’ll stretch to fill the available space. So if you have a separate chart there, it’ll stretch to fit the available space too.
  • You must to post comments
Showing 1 result
Your Answer

Please first to submit.