Hi,
We have two charts showing pricing data, one is upper and other is lower chart, we have Synchronize both charts and have added two y axis to each chart one on left and other on the right. although we are not showing any other series on the primary chart but we added secondary y axis there too to handle the chart size issue. Initialy both chart have same witdth, but when any secondary series is added to the bottom chart then chart width become different.
Please refer to attached images which show charts with y axis visble and not vissible.
Bothe chart have following Lable settings for Secondary Y axis:
<
ig:NumericYAxis.LabelSettings>
Thanks
And before adding any other secondary series it looks like following
You should set the extent of the 2 secondary y axes to be the same value. The synchronization will not do this for you.
-Graham
Hi Graham,
we have set extent to 80 for both secondary y axis as following:
Location="OutsideRight" Extent="80" Foreground="Black" FontFamily="Arial" FontSize="11"
could you share the full xaml for the chart setup please? I looks to me like the upper y axis is not set to have a manual extent. It looks like it is sizing to the labels.
Bug number is 107476.
It looks like there is a bug such that an empty axis will not size to the extent that you specified. So your strategy of using an empty axis to adjust the margin on the right side is not working. I'll get back to you with a bug number.
In the meantime, what you can do is set a minimumValue and a maximumValue on that empty axis but set its font foreground to Transparent. In this way it will take up the necessary extent size, but you wont see its labels. Let me know if that works for you!
Here is the code as per request.
<Grid Style="{StaticResource GridChart}" Grid.Row="2" Grid.Column="0" > <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="5"/> <RowDefinition Height="130"/> </Grid.RowDefinitions>
<ig:XamDataChart Name="chtPrice" Grid.Column="0" Grid.Row="0" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" MinHeight="255" Height="auto" Background="#FFEBF3FB" PlotAreaBackground="White" PlotAreaBorderBrush="#FFEBF3FB" PlotAreaBorderThickness="0" VerticalZoombarVisibility="Visible" VerticalZoomable="True" HorizontalZoombarVisibility="Visible" HorizontalZoomable="True" CrosshairVisibility="Visible" CrosshairLineStyle="{StaticResource CrosshairLineStyle}" ToolTipStyle="{StaticResource DataChartToolTipStyle}"> <ig:SyncManager.SyncSettings> <ig:SyncSettings SyncChannel="syncGroup1" SynchronizeHorizontally="False" SynchronizeVertically="True" /> </ig:SyncManager.SyncSettings>
<slCore:ChartCrosshairBehaviors.CrosshairVisibility> <slCore:ChartCrosshairVisibilityBehavior ShowHorizontalCrosshair="False" ShowVerticalCrosshair="True" /> </slCore:ChartCrosshairBehaviors.CrosshairVisibility>
<ig:XamDataChart.Axes> <ig:CategoryDateTimeXAxis x:Name="PriceXAxis" DateTimeMemberPath="Date" Label="{}{Date:MM/dd/yy}" MajorStroke="#FFE6EFF7" MajorStrokeThickness="1.5" MajorStrokeDashArray="1 2" > <ig:CategoryDateTimeXAxis.LabelSettings> <ig:AxisLabelSettings Location="InsideBottom" Extent="0" Foreground="Black" FontFamily="Arial" FontSize="11" Angle="0" Visibility="Collapsed" /> </ig:CategoryDateTimeXAxis.LabelSettings> </ig:CategoryDateTimeXAxis>
<ig:NumericYAxis x:Name="PriceYAxis" Label="{}{0:N2}" MajorStroke="#FFE6EFF7" MajorStrokeThickness="1.5" MajorStrokeDashArray="1 2" > <!--MinimumValue="0" MaximumValue="10"--> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="70" Foreground="Black" FontFamily="Arial" FontSize="11" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis>
<ig:NumericYAxis x:Name="PriceSecondaryYAxis" Label="{}{0:N2}" Visibility="Visible" MajorStroke="Transparent" MinorStroke="Transparent" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideRight" Extent="80" Foreground="Black" FontFamily="Arial" FontSize="11" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes>
<ig:XamDataChart.Series> <ig:TypicalPriceIndicator Name ="TypicalPriceIndicator" Title="Typical Price Indicator" XAxis="{Binding ElementName=PriceXAxis}" YAxis="{Binding ElementName=PriceYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:TypicalPriceIndicator> <ig:WeightedCloseIndicator Name ="WeightedCloseIndicator" Title="Weighted Close Indicator" XAxis="{Binding ElementName=PriceXAxis}" YAxis="{Binding ElementName=PriceYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:WeightedCloseIndicator> <ig:FinancialPriceSeries Name="PriceSeries" Title="Prices" XAxis="{Binding ElementName=PriceXAxis}" YAxis="{Binding ElementName=PriceYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" NegativeBrush="#FF0072AB" Brush="#80F8F8F8" DisplayType="Candlestick" Resolution="1" > </ig:FinancialPriceSeries> </ig:XamDataChart.Series>
</ig:XamDataChart> <ig:Legend x:Name="lgdFinacials" Content="Legend" Margin="10, 10, 90, 30" VerticalAlignment="Top" HorizontalAlignment="Right" Opacity=".75" ></ig:Legend> <ig:XamDataChart Name="chtVolume" Grid.Column="0" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Height="130" Background="#FFEBF3FB" PlotAreaBackground="White" PlotAreaBorderBrush="#FFEBF3FB" PlotAreaBorderThickness="0" VerticalZoombarVisibility="Visible" VerticalZoomable="False" HorizontalZoombarVisibility="Collapsed" HorizontalZoomable="True" ToolTipStyle="{StaticResource DataChartToolTipStyle}" CrosshairVisibility="Visible" CrosshairLineStyle="{StaticResource CrosshairLineStyle}"> <ig:SyncManager.SyncSettings> <ig:SyncSettings SyncChannel="syncGroup1" SynchronizeHorizontally="True" SynchronizeVertically="False" /> </ig:SyncManager.SyncSettings>
<slCore:ChartCrosshairBehaviors.CrosshairVisibility> <slCore:ChartCrosshairVisibilityBehavior ShowHorizontalCrosshair="False" ShowVerticalCrosshair="True" /> </slCore:ChartCrosshairBehaviors.CrosshairVisibility> <ig:XamDataChart.Axes> <ig:CategoryDateTimeXAxis x:Name="VolumeXAxis" DateTimeMemberPath="Date" Label="{}{Date:MM/dd/yy}" MajorStroke="#FFE6EFF7" MajorStrokeThickness="1.5" MajorStrokeDashArray="1 2" > <ig:CategoryDateTimeXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="30" Foreground="Black" FontFamily="Arial" FontSize="11" Angle="0" /> </ig:CategoryDateTimeXAxis.LabelSettings> </ig:CategoryDateTimeXAxis> <ig:NumericYAxis x:Name="VolumeYAxis" Label="{}{0:N0}" MajorStroke="#FFE6EFF7" MajorStrokeThickness="1.5" MajorStrokeDashArray="1 2" > <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="70" Foreground="Black" FontFamily="Arial" FontSize="11" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> <ig:NumericYAxis x:Name="VolumeSecondaryYAxis" Label="{}{0:N2}" Visibility="Visible" MajorStroke="Transparent" MinorStroke="Transparent" > <!--MinimumValue="0" MaximumValue="10"--> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideRight" Extent="80" Foreground="Black" FontFamily="Arial" FontSize="11" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes>
<ig:XamDataChart.Series> <ig:ColumnSeries Name="VolumeSeries" Title="Volume" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeYAxis}" Legend="{Binding ElementName=lgdFinacials}" ValueMemberPath="Volume" Brush="Blue"> </ig:ColumnSeries>
<ig:RateOfChangeAndMomentumIndicator Name ="RateofChangeAndMomentumIndicator" Title="Rate of Change And Momentum Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:RateOfChangeAndMomentumIndicator> <ig:RelativeStrengthIndexIndicator Name ="RelativeStrengthIndexIndicator" Title="Relative Strength Index Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:RelativeStrengthIndexIndicator> <ig:SlowStochasticOscillatorIndicator Name ="SlowStochasticOscillatorIndicator" Title="Slow Stochastic Oscillator Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:SlowStochasticOscillatorIndicator> <ig:StandardDeviationIndicator Name ="StandardDeviationIndicator" Title="Standard Deviation Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:StandardDeviationIndicator> <ig:StochRSIIndicator Name ="StochRSIIndicator" Title="StochRSI Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:StochRSIIndicator> <ig:TRIXIndicator Name ="TRIXIndicator" Title="TRIX Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:TRIXIndicator> <ig:WilliamsPercentRIndicator Name ="WilliamsPercentRangeIndicator" Title="Williams Percent Range Indicator" XAxis="{Binding ElementName=VolumeXAxis}" YAxis="{Binding ElementName=VolumeSecondaryYAxis}" Legend="{Binding ElementName=lgdFinacials}" OpenMemberPath="Open" CloseMemberPath="Close" HighMemberPath="High" LowMemberPath="Low" VolumeMemberPath="Volume" Visibility="Collapsed"></ig:WilliamsPercentRIndicator> </ig:XamDataChart.Series>
</ig:XamDataChart>
</Grid>