1. Home
  2. Forum
  3. WPF
  4. VerticalLineAnnotation over multiple Y axes?

VerticalLineAnnotation over multiple Y axes?

Hi, I need a very fast vertical line that spans across all y axes in a multiple axis chart. Ideally, I would use a stripline for this, but since it's too slow, I must use annotation instead. This line acts as a visual sync between two separate charts when the mouse moves over one of the charts, essentially acting as a kind of remote crosshair on the other chart with a very large datasource, that's why it needs to display very fast. So far, I've only been able to display the line on one of the y axes, even when EnableClipping is set to false.

A workaround I've found is to create a vertical line annotation for each of the y axes, but this seems excessive when there are up to 10 y axes on the chart.

What would be the best way to accomplish this?

Thanks.

7 Replies
SR Samuel Rajadurai Edwin Rajamanickam Syncfusion Team July 18, 2018 11:09 AM UTC

Hi Tom, 
  
We have analyzed your query and we suspect that your requirement is to show vertical line with all vertical axes connectivity with line position change based on mouse move. You can achieve this by using ChartCrossHairBehavior as per below code snippet.  
  
We can customize the horizontal line visibility by using  HorizontalLineStyle in behavior as per the below code snippet.  
  
Code Snippet 
 
                     
        <chart:SfChart x:Name="chart" > 
             
            … 
 
            <chart:SfChart.Behaviors> 
                <chart:ChartCrossHairBehavior > 
                    <chart:ChartCrossHairBehavior.HorizontalLineStyle> 
                        <Style TargetType="Line"> 
                            <Setter Property="StrokeThickness" Value="0"/> 
                        </Style> 
                    </chart:ChartCrossHairBehavior.HorizontalLineStyle> 
                </chart:ChartCrossHairBehavior> 
            </chart:SfChart.Behaviors> 
 
        </chart:SfChart> 
 
 
  
We have prepared a sample based on this, please find the sample from the following location.  
  
  
If you requirement is different from this means please give more information about your requirement that would be helpful for us to give better solution in this.  
  
Regards,
Samuel 


TO Tom July 19, 2018 03:59 PM UTC

Hi Samuel, the problem is a little more complicated. I've attached an image which explains the issue. 

There are two separate charts, the top chart shows daily candles, whereas the bottom chart shows minutes for the same days as the top chart. As the mouse cursor moves across the top chart, there should be two red lines on the bottom chart which highlights which day the cursor is currently over. So, for example if the cursor is over the day 5/2/14 on the top chart, there should be a red line on the beginning of 5/2/14 and another red line at the end of 5/2/14 on the bottom minute chart.

What I've made so far is, I have two vertical line annotations on the bottom chart, which works perfectly, but they only show on a single Y axis area. Now, if we go with the corsshairbehaviour solution, I don't know if we can have two crosshairs on the same chart, and control their location.

Attachment: SnapShot_164_7f1031c.rar

DS Durgadevi Selvaraj Syncfusion Team July 20, 2018 12:55 PM UTC

Hi Tom, 
 
Thanks for the update. 
 
We would like to inform you that annotation Y position set with first chart row definition axis when using chart Rowdefinitions. You can achieve your requirement (VerticalLineAnnotation on remaining chart rows) by setting total y-values of chart area to the Y2 of VerticalLineAnnotation as shown in the below code snippet,  

CodeSnippet[C#] 
private void chart1_Loaded(object sender, RoutedEventArgs e) 
{ 
            double y2Pos = 0;  
 
            foreach (CartesianSeries series in chart1.Series) 
            { 
                if (series.YAxis != null) 
                    y2Pos += series.YAxis.VisibleRange.End; 
            } 
            if (chart1.SecondaryAxis != null) 
                y2Pos += chart1.SecondaryAxis.VisibleRange.End; 
 
            (chart1.Annotations[0] as VerticalLineAnnotation).Y2 = y2Pos; 
            (chart1.Annotations[1] as VerticalLineAnnotation).Y2 = y2Pos;  
} 
 
We have modified the sample based on your requirement and please find it from below location, 

 
Please let us know if you have any concerns. 
 
Regards,  
Durgadevi. S 


TO Tom July 21, 2018 08:12 AM UTC

Hi Durgadevi, I've tried implementing your solution into my own application, but ran into some issues.

Issue 1: Adding up all the visible ranges results in a wrong number when one of the axes is a logarithmic axis.

Issue 2: The performance is very slow when using a custom Y axis. The reason I'm using a custom axis is because I need to perform custom label generation, zooming, etc. In single axis mode, the annotation performance is good. But it gets slow right when moving the cursor on the candle chart over to the right at the point where there is no data on the minute charts. Also it gets very slow when the annotation extends beyond a single axis. What I've discovered is that the CalculateVisibleRange sub gets executed continuously at the moment when the performance is slow, as can be seen in the Immediate window.

Attached is the modified chart showing this behavior (VB.NET). Use the radio buttons to compare the two modes.

Attachment: SfChartMultiAxisAnnotation_dde25034.rar

MK Muneesh Kumar G Syncfusion Team July 23, 2018 08:53 AM UTC

Hi Tom, 
 
Thanks for your update.  
 
Issue 1 : We have resolved this problem by using CoordinateUnit as Pixel for annotation and set particular axis or total area size to annotation in radio button checked event as per the below code snippet.  
 
Code snippet [C#]: 
  With MinuteMarker1 
            .StrokeThickness = 4 
            .Stroke = New SolidColorBrush(Colors.Red) 
            .CoordinateUnit = CoordinateUnit.Pixel 
        End With 
        MinuteChart.Annotations.Add(MinuteMarker1) 
 
        With MinuteMarker2 
            .StrokeThickness = 4 
            .Stroke = New SolidColorBrush(Colors.Red) 
            .CoordinateUnit = CoordinateUnit.Pixel 
        End With 
        MinuteChart.Annotations.Add(MinuteMarker2) 
... 
 
Private Sub rbSingle_Checked(sender As Object, e As RoutedEventArgs) Handles rbSingle.Checked 
 
        MinuteMarker1.Y1 = Nothing 
        MinuteMarker2.Y1 = Nothing 
 
        MinuteMarker1.Y2 = MinutePriceYaxis.ArrangeRect.Bottom 
        MinuteMarker2.Y2 = MinutePriceYaxis.ArrangeRect.Bottom 
 
    End Sub 
 
    Private Sub rbMultiple_Checked(sender As Object, e As RoutedEventArgs) Handles rbMultiple.Checked 
 
        MinuteMarker1.Y1 = Nothing 
        MinuteMarker2.Y1 = Nothing 
 
        MinuteMarker1.Y2 = MinuteChart.SeriesClipRect.Bottom 
        MinuteMarker2.Y2 = MinuteChart.SeriesClipRect.Bottom 
 
    End Sub 
 
 
We have modified our sample based on this, please find the sample from the following location.  
 
 
Issue 2 :  We have checked this problem with provided sample and it is working fine with right edge. There is no performance lack in mouse movement. We have confirmed the sample with 16.1.0.37 version. Can you please check the attached video for sample movement? 
 
 
Please let us know syncfusion product version and replication procedure if you are still facing any issue in this. 
 
Thanks, 
Muneesh Kumar G. 
 


TO Tom July 24, 2018 06:09 PM UTC

Hi Muneesh, this works fantastic, thank you so much for your help.

MK Muneesh Kumar G Syncfusion Team July 25, 2018 04:13 AM UTC

Hi Tom, 

Thanks for the update.

We are glad to know that the given solution works. Please let us know if you need any further assistance.

Thanks,
Muneesh Kumar G.

Loader.
Up arrow icon