Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
15
Xaml datagrid XAxis legend with negative minimum value displaying oddly
posted

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

Parents
  • 34430
    Suggested Answer
    Offline posted

    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

Reply Children
No Data