Hi,
I am using xamDataChart which has two line series with CategoryDateTimeXAxis and NumericYAxis. I have enabled crosshair over chart and I want to show both Series values in a tooltip with crosshair.
I find a reference here to show the tooltip with cross hair but it is not showing me any Series Value where vertical line of crosshair is. Here is the image what I am getting.
I am using the same code which Graham suggest in his post but as show in screen shot, Value is empty.
Here is my complete XAML code of the view if it may help.
<Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="350" Width="525" xmlns:ig="http://schemas.infragistics.com/xaml" xmlns:behaviour="clr-namespace:WpfApplication1" > <Window.Resources> <ResourceDictionary> <Style x:Key="CrosshairLineStyle1" TargetType="Line"> <Setter Property="Stroke" Value="Gray" /> <Setter Property="StrokeThickness" Value="1.5" /> </Style> <DataTemplate x:Key="tooltipTemplate"> <Border BorderBrush="Gray" BorderThickness="1" CornerRadius="5" Background="White" IsHitTestVisible="False" Padding="5"> <ItemsControl ItemsSource="{Binding}"> <ItemsControl.ItemTemplate> <DataTemplate> <StackPanel Orientation="Horizontal"> <ContentPresenter Content="{Binding}" ContentTemplate="{Binding Series.LegendItemBadgeTemplate}" /> <TextBlock Text="Series: " /> <TextBlock Text="{Binding Series.Title}" /> <TextBlock Text=" " /> <TextBlock Text="Value: " /> <TextBlock Text="{Binding Item.Value}" /> </StackPanel> </DataTemplate> </ItemsControl.ItemTemplate> </ItemsControl> </Border> </DataTemplate> </ResourceDictionary> </Window.Resources> <Grid> <StackPanel> <TextBlock Text="{Binding XDateTime}" /> <TextBlock Text="{Binding YValue}" /> <ig:XamDock x:Name="xmDockContainer" Margin="2" VerticalAlignment="Stretch" Height="600"> <Border Background="White" > <Border.Effect> <DropShadowEffect Color="Black" BlurRadius="10" ShadowDepth="0" Opacity="0.7"></DropShadowEffect> </Border.Effect> </Border> <ig:XamDataChart Name="chtMain" BorderThickness="0" BorderBrush="Transparent" HorizontalZoomable="True" HorizontalZoombarVisibility="Visible" CrosshairVisibility="Visible" CrosshairLineStyle="{StaticResource CrosshairLineStyle1}" PropertyUpdated="chtMain_PropertyUpdated" SeriesCursorMouseMove="XamDataChart_SeriesCursorMouseMove"> <behaviour:ChartCrosshairBehaviors.CrosshairVisibility> <behaviour:ChartCrosshairVisibilityBehavior ShowHorizontalCrosshair="False" ShowVerticalCrosshair="True"></behaviour:ChartCrosshairVisibilityBehavior> </behaviour:ChartCrosshairBehaviors.CrosshairVisibility> <behaviour:ChartBehaviors.CursorTooltip> <behaviour:CursorTooltipBehavior TooltipTemplate="{StaticResource tooltipTemplate}" /> </behaviour:ChartBehaviors.CursorTooltip> <ig:XamDataChart.Axes> <ig:CategoryDateTimeXAxis x:Name="xAxis1" Label="{}{Date:MM/dd/yyyy}" ItemsSource="{Binding ChartSource}" DateTimeMemberPath="Date" MinorStroke="Transparent" MajorStroke="Transparent"> <ig:CategoryDateTimeXAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideBottom" Extent="45" Angle="30"></ig:AxisLabelSettings> </ig:CategoryDateTimeXAxis.LabelSettings> </ig:CategoryDateTimeXAxis> <ig:NumericYAxis x:Name="yAxis1" MinorStroke="Transparent" MajorStroke="Transparent"> <ig:NumericYAxis.LabelSettings> <ig:AxisLabelSettings Location="OutsideLeft" Extent="15" VerticalAlignment="Center" Visibility="Visible" /> </ig:NumericYAxis.LabelSettings> </ig:NumericYAxis> </ig:XamDataChart.Axes> <ig:XamDataChart.Series> <ig:LineSeries Thickness="2" MarkerType="None" Title="Actual Measures" ItemsSource="{Binding ChartSource}" ValueMemberPath="Value1" Legend="{Binding ElementName=AMLegend}" XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}"> <ig:LineSeries.ToolTip> <StackPanel Orientation="Vertical"> <TextBlock Text="{Binding Series.Title}" FontWeight="Bold" /> <StackPanel Orientation="Horizontal"> <TextBlock Text="{Binding Item.Date}" Foreground="Black"/> <TextBlock Text="{Binding Item.Value1}" Foreground="Black"/> </StackPanel> </StackPanel> </ig:LineSeries.ToolTip> </ig:LineSeries> <ig:LineSeries Thickness="2" MarkerType="None" Title="Predicted Rolling Four Quarters" ItemsSource="{Binding ChartSource}" ValueMemberPath="Value2" Legend="{Binding ElementName=AMLegend}" XAxis="{Binding ElementName=xAxis1}" YAxis="{Binding ElementName=yAxis1}" /> </ig:XamDataChart.Series> </ig:XamDataChart> <ig:Legend x:Name="AMLegend" Orientation="Horizontal" Height="28" ig:XamDock.Edge="OutsideBottom" ig:XamDock.VerticalDockAlignment="Bottom" ig:XamDock.HorizontalDockAlignment="Center" Margin="-2,2"> </ig:Legend> </ig:XamDock> </StackPanel> </Grid></Window>
Thank you.
Hello Stefan,
Thank you very much for your reply and sample project. I was using "CategoryDateTimeXAxis" in my project which I think causing the problem. Anyhow I go through your sample project and it looks working fine with simple CategoryAxis, however I will integrate your sample application logic with my actual project and let you know the final result.
However one weird thing I noticed in you application is that when I move the cursor to the right of chart then tooltip does not display and cursor start blinking. I understand that it might be because there is not enough space for tooltip but I think, in this case, tooltip should display to the left side of cursor? Any suggestion to handle this situation.
Thanks,
M. Irfan
Hello,
Thank you for your post. I have been looking into it and I created a sample project for you using the code Graham provided and everything seems to work ok on my side. If the sample doesn’t satisfies all your needs feel free to modify it, so it reproduces your behavior and send it back to me for further investigation.
Looking forward for your reply.