FlexChart | ComponentOne
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.WPF.Chart.Interaction.C1LineMarker class and add it to the Layers collection of the chart by using the Layers property of C1FlexChart.

    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>
    <Chart:C1LineMarker x:Name="lineMarker" Lines="Vertical" 
    Grid.Row="2" PositionChanged="OnLineMarkerPositionChanged" 
    VerticalAlignment="Top"/>
</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();
        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) }
            });
        }
        lineMarker.Content = tb;
    }
}

    VB
    Copy Code 
        Private Sub OnLineMarkerPositionChanged(sender As Object, e As PositionChangedArgs)
        If flexChart IsNot Nothing Then
            Dim info = flexChart.HitTest(e.Position)
            Dim pointIndex As Integer = info.PointIndex
            Dim tb = New TextBlock()
            tb.Inlines.Add(New Run() With {
                .Text = info.X.ToString()
            })
            For index As Integer = 0 To flexChart.Series.Count - 1
                Dim series = flexChart.Series(index)
                Dim value = series.GetValues(0)(pointIndex)
                Dim fill = CInt(DirectCast(flexChart, IChart).GetColor(index))
                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)
                    }
                })
            Next
            lineMarker.Content = tb
        End If
    End Sub