[RadCartesianChart] How to change line adsorption to point adsorption in RadCartesianChart?

[asd]

I am facing point adsorption issues on RadCartesianChart.

When moving the mouse in chart, there is a line adsorption with the related data. But as in customer data, there are many very similiar data in one abscissa, so I want to change the line adsorption to point adsorption when mouse is moved on it, and at the same time, the point style can be changed, for example, change color and enlarge. 

Please see the png and suggest me some ideas to rectify this problem. Thanks!

[Martin Ivanov]

Hello,

I am not sure that I understand your requirement. Currently, you have a line drawn on the chart. Can you tell me how you draw this line and what is the relation with the data points? Is the line drawn using an annotation?

Also, can you send me drawings of the expected result?

In the meantime you can check the following resource:

• Trackball behavior
• PointSeries
• Binding the color of series items
• Customizing CartesianChart Series

Regards,
Martin Ivanov
Progress Telerik

[asd]

Thank you for your first answer. 

Yes, we are using the ChartTrackball behaavior. Here is part of code:

<telerik:RadCartesianChart Margin="0" x:Name="FreqDataChart"
                                                                       Palette="{StaticResource customPalette}"
                                                                       local:ChartUtilities.IsDragToSelectEnabled="{Binding Path=SelectToolEnabled}"
                                                                       local:ChartUtilities.SelectionRectangleStyle="{StaticResource SelectionRectangleStyle}">
                                                <telerik:RadCartesianChart.Behaviors>
                                                    <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both">
                                                        <telerik:ChartPanAndZoomBehavior.DragMode>
                                                            <MultiBinding Converter="{StaticResource BoolToDragConverter}">
                                                                <Binding Path="ZoomToolEnabled"></Binding>
                                                                <Binding Path="PanToolEnabled"></Binding>
                                                            </MultiBinding>
                                                        </telerik:ChartPanAndZoomBehavior.DragMode>
                                                    </telerik:ChartPanAndZoomBehavior>
                                                    <telerik:ChartTrackBallBehavior TrackInfoUpdated="ChartTrackBallBehavior_TrackInfoUpdated" ShowIntersectionPoints="False" ShowTrackInfo="False"/>
                                                </telerik:RadCartesianChart.Behaviors>
                                                <telerik:RadCartesianChart.HorizontalAxis>
                                                    <telerik:LinearAxis Title="Toa(us)"></telerik:LinearAxis>
                                                </telerik:RadCartesianChart.HorizontalAxis>
                                                <telerik:RadCartesianChart.VerticalAxis>
                                                    <telerik:LinearAxis Title="Freq(MHz)" ></telerik:LinearAxis>
                                                </telerik:RadCartesianChart.VerticalAxis>
                                                <telerik:RadCartesianChart.Grid>
                                                    <telerik:CartesianChartGrid StripLinesVisibility="Y"></telerik:CartesianChartGrid>
                                                </telerik:RadCartesianChart.Grid>
                                                <telerik:ScatterPointSeries x:Name="FreqSeries0" PointSize="3,3" XValueBinding="Toa_us" YValueBinding="Freq" ItemsSource="{Binding}">
                                                    <telerik:ScatterPointSeries.RenderOptions>
                                                        <telerik:BitmapRenderOptions></telerik:BitmapRenderOptions>
                                                    </telerik:ScatterPointSeries.RenderOptions>
                                                </telerik:ScatterPointSeries>

.......

What I expected result is highlight the point which mouse on it, like the result as Specifying a custom TrackBallTemplate:

<telerik:ScatterLineSeries.TrackBallTemplate><DataTemplate><Rectangle Width="20"Height="20"Fill="Violet"RenderTransformOrigin="0.5,0.5"><Rectangle.RenderTransform><RotateTransform Angle="45"/></Rectangle.RenderTransform></Rectangle></DataTemplate></telerik:ScatterLineSeries.TrackBallTemplate>

But it is invalid. What's your suggestion?

Thanks in advance.

[Martin Ivanov]

Hello,

It seems that the template is not valid because the ScatterLineSeries.TrackBallTemplate is set in a ScatterPointSeries. You can fix this by changing the ScatterLineSeries.TrackBallTemplate to ScatterPointSereis.TrackBallTemplate.

<telerik:ScatterPointSeries>
           <telerik:ScatterPointSeries.TrackBallTemplate>
           </telerik:ScatterPointSeries.TrackBallTemplate>
</telerik:ScatterPointSeries>

Also, in order to display the trackball visual element you will need to set ShowIntersectionPoints property of the behavior to True. Then you can use the TrackBallLineStyle property of the chart to hide the trackball line. 

<telerik:RadCartesianChart.TrackBallLineStyle>
    <Style TargetType="Polyline">
        <Setter Property="Visibility" Value="Collapsed" />
    </Style>
</telerik:RadCartesianChart.TrackBallLineStyle>

I attached a sample project based on your code to show this approach. I hope it helps.

Regards,
Martin Ivanov
Progress Telerik