ComponentOne FlexChart for UWP
FlexChart / Working with FlexChart / End-User Interaction / Line Marker
In This Topic
    Line Marker
    In This Topic

    LineMarker displays the precise data values for a given position on the chart by dragging horizontal and/or vertical lines over the plot with an attached label. It is useful in scenarios, where a user has a lot of data in a line or area chart, or if a user wants to display data from multiple series in a single label. With built-in interactions, such as Drag and Move. a user can drag the line marker and more precisely select the data point on the chart.

    To create a line marker and use it in FlexChart, you need to create an instance of the C1.Xaml.Chart.Interaction.C1LineMarker class.

    You need to use the Lines property provided by C1LineMarker to set the visibility of the LineMarker lines. The Lines property accepts the following values from the LineMarkerLines enumeration:

    The C1LineMarker class also provides the Alignment property to set the alignment of the line marker. In addition, you can set the interaction mode of the line marker by setting the Interaction property to any of the following values in the LineMarkerInteraction enumeration:

    If you set the Interaction property to Drag, you need to set the DragContent and the DragLines property to specify whether the content and values linked with the line marker lines are draggable or not. Furthermore, you can set the initial position of the line marker relative to the plot area with the help of VerticalPosition and HorizontalPostion properties. The acceptable range for these properties is [0,1].

    Below is the code snippet with the implementation.

    <Chart:C1FlexChart.Layers>
    <Interaction:C1LineMarker x:Name="lineMarker" PositionChanged="OnLineMarkerPositionChanged"
       DragThreshold="30"/>
</Chart:C1FlexChart.Layers>
    C#
    Copy Code 
    private void OnLineMarkerPositionChanged(object sender, PositionChangedArgs e)
{
    if (flexChart != null)
    {
        var info = flexChart.HitTest(e.Position);
        int pointIndex = info.PointIndex;
        var tb = new TextBlock();
        if (info.X == null)
            return;

        tb.Inlines.Add(new Run()
        {
            Text = info.X.ToString()
        });
        for (int index = 0; index < flexChart.Series.Count; index++)
        {
            var series = flexChart.Series[index];
            var value = series.GetValues(0)[pointIndex];
            var fill = (int)((IChart)flexChart).GetColor(index);
            string content = string.Format("{0}{1} = {2}", "\n", series.SeriesName, value.ToString());
            tb.Inlines.Add(new Run()
            {
                Text = content,
                Foreground = new SolidColorBrush() { Color = FromArgb(fill) }
            });
        }
        tb.IsHitTestVisible = false;
        lineMarker.Content = tb;
    }
}

    VB
    Copy Code 
    Private Sub OnLineMarkerPositionChanged(sender As Object, e As PositionChangedArgs)
    If flexChart IsNot Nothing Then
        Dim info As HitTestInfo = flexChart.HitTest(e.Position)
        If info.Item Is Nothing Then
            Return
        End If
        Dim pointIndex As Integer = info.PointIndex
        Dim tb As New TextBlock()
        tb.Inlines.Add(New Run() With {
            .Text = info.X.ToString()
        })
        Dim index As Integer = 0
        While index < flexChart.Series.Count
            Dim series As Series = flexChart.Series(index)
            Dim value As Object = series.GetValues(0)(pointIndex)
            Dim fill As Integer = CType((CType(flexChart, IChart)).GetColor(index), Integer)
            Dim content As String = String.Format("{0}{1} = {2}", vbLf, series.SeriesName, value.ToString())
            tb.Inlines.Add(New Run() With {
                .Text = content,
                .Foreground = New SolidColorBrush() With {
                    .Color = FromArgb(fill)
                }
            })
            index += 1
        End While
        tb.IsHitTestVisible = False
        lineMarker.Content = tb
    End If
End Sub