I'm attempting to display a data chart which uses a negative minimum value and a range which crosses zero to it maximum value.
X Min = -2000, X Max = 1800, Range = -2000 to 18000
Y Min = 0, Y Max = 250 Y Range = 0 to 250
When displaying the chart fails to align the X and Y vertices at 0,0. Is this possible?
Note that for this data there are no X data values less than 0 but if there were I would expect them to appear before the Y axis.
Here's my XAML:
Note that the dataplot and legends are rendered dynamically
<!-- *** Histogram Graph Section *** --> <DataTemplate x:Name="templateName"> <Grid> <Grid x:Name="graphGrid"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="25"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="20"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <ig:XamDataChart x:Name="DataChart" Margin="0,10,10,0" Grid.Row="0" Grid.Column="1" MouseRightButtonDown="dataChartMouseRightButtonDown" MouseLeftButtonDown="rootMouseLeftButtonDown" Height="{Binding TileGraphHeight, Source={StaticResource HistogramViewModel}}" Width="{Binding TileGraphWidth, Source={StaticResource HistogramViewModel}}" VerticalAlignment="Stretch" > <ig:XamDataChart.Resources> <local1:LabelTranslateConverter x:Key="LabelTranslateConverter"/> <Style TargetType="ig:CategoryXAxis"> <Setter Property="Label"> <Setter.Value> <DataTemplate> <TextBlock Name="txt1" VerticalAlignment="Stretch" HorizontalAlignment="Stretch" RenderTransformOrigin="0,0" Text="{Binding Item.Category}" > <TextBlock.RenderTransform> <Binding Converter="{StaticResource LabelTranslateConverter}" RelativeSource="{RelativeSource AncestorType=ig:XamDataChart}" > </Binding> </TextBlock.RenderTransform> </TextBlock> </DataTemplate> </Setter.Value> </Setter> </Style> </ig:XamDataChart.Resources> <ig:XamDataChart.Axes> <ig:NumericYAxis x:Name="YAxis" MinimumValue="0"> <ig:NumericYAxis.Label> <DataTemplate> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Item}" /> <TextBlock Text="{Binding YLabelSuffix, Source={StaticResource HistogramViewModel}}" /> </StackPanel> </DataTemplate> </ig:NumericYAxis.Label> </ig:NumericYAxis> <ig:CategoryXAxis x:Name="XAxis" ItemsSource="{Binding Series}" Interval="1" > <ig:CategoryXAxis.LabelSettings> <ig:AxisLabelSettings Angle="90" /> </ig:CategoryXAxis.LabelSettings> </ig:CategoryXAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:ColumnSeries ItemsSource="{Binding Series}" ValueMemberPath="Value" Title="Parameter Spectrum Data" x:Name="series1" XAxis="{Binding ElementName=XAxis}" YAxis="{Binding ElementName=YAxis}"> <ig:ColumnSeries.ToolTip> <TextBlock Text="{Binding Item.Value, StringFormat=\{0:n1\}}" /> </ig:ColumnSeries.ToolTip> </ig:ColumnSeries> <ig:ItemToolTipLayer TargetSeries="{Binding ElementName=series1}" /> </ig:XamDataChart.Series> </ig:XamDataChart>
<TextBlock Grid.Row="0" Grid.Column="1" HorizontalAlignment="Right" VerticalAlignment="Top" Margin="0,15,20,0" Text="{Binding NetTimeLabel}" /> <TextBlock x:Name="XAxisLabel" Grid.Row="1" Grid.Column="1" Text="{Binding DomainLabel}" MinHeight="25" HorizontalAlignment="Center" Margin="0" VerticalAlignment="Center" /> <TextBlock x:Name="RotatedLabel" Grid.Row="0" Grid.Column="0" Text="{Binding RangeLabel}" Margin="-150,5,-150,5" RenderTransformOrigin="0.5,0.5" TextWrapping="Wrap" VerticalAlignment="Center" HorizontalAlignment="Center" Width="150" Height="20" d:LayoutOverrides="Height" > <TextBlock.RenderTransform> <CompositeTransform Rotation="-90"/> </TextBlock.RenderTransform> </TextBlock> </Grid> <Border BorderThickness="2" BorderBrush="Gray" Visibility="{Binding IsExportTabSelected, Source={StaticResource HistogramViewModel}, Converter={StaticResource VisibilityConverter}}"> <CheckBox IsChecked="{Binding ToBeExported, Mode=TwoWay}" HorizontalAlignment="Right"/> </Border> </Grid> </DataTemplate>
Thanks;
Wil
Hello Wil,
It is possible to align the X and Y vertices at (0,0). In order to do this, I would recommend that you set the CrossingAxis property on your NumericYAxis to your XAxis. You will also need to set the CrossingValue property. In the case of the CategoryXAxis shown in your screenshot, this CrossingValue property will be the index of the category that holds the value “0” in your underlying ItemsSource.
Doing this will align the Y-axis line with zero on the XAxis. If you will have a NumericYAxis that will go less than zero, you will need to do the same thing with the CategoryXAxis in this case, but with the CrossingValue being the value on the numeric axis that you want it to cross over.
It is worth noting that unless you set the NumericYAxis.LabelSettings.Location property, the labels will still remain on the “outside” of the chart. If you set them to “InsideLeft” or “InsideRight” they will align with the grid-line. It is worth noting though, that there is no functionality currently to have the series avoid collision with the axis lines or labels. If you set the Location property mentioned above to exist in the plot area, the labels will be drawn over the top of the series that are plotted in the chart.
I am attaching a sample project to demonstrate the above. I hope this helps you.
Please let me know if you have any other questions or concerns on this matter.
XamDataChartCrossValueCase.zip
Hi Andrew;
Thanks for your description of using CrossingValue. It was exactly what I was looking for and eliminated the need for the extra 0 within the legends. Keeping the labelling at the default values is not a problem for us.