Line Marker

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:

Both: Shows both vertical and horizontal lines
Horizontal: Shows a horizontal line
Vertical: Shows a vertical line
None: Shows no line

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:

Drag: The line marker moves when the user drags the line
Move (Default): The line marker moves with the pointer
None: The user specifies the position by clicking.

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.

XAML
Code

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; } }

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

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