FlexChart | ComponentOne
Elements / Line Markers
In This Topic
    Line Markers
    In This Topic

    Line markers are horizontal or vertical lines on the chart plot and are bound to some value on an axis. These are attached with a label to show the exact data values and are generally used for showing a trend or marking an important value or threshold on the chart. Line markers can also be used in case of huge number of data points plotted on a chart or when user wants to display a label with precise data values of multiple series plotted on a chart. For instance, line markers are so useful in a chart that plots price fluctuations of a stock on daily basis across the year.

    Line marker chart

    FlexChart provides line markers through LineMarker class of the C1.Win.Chart.Interaction namespace. You can set the Lines property of this class to specify whether you want to display a horizontal, vertical, both or none(default) of the line markers. This property accepts the value from LineMarkerLines enumeration. LineMarker class also provides the Content property to customize the content of line marker label and Alignment property to set the position of the label against the data values.

    In FlexChart, by default, the line markers move along with the pointer and facilitate the end user to know the exact data values at the position of the pointer. However, you can change this behavior by setting the Interaction property to None or Drag. While the value None means line marker remains static and does not allow the end-user to interact with the line markers, the value Drag lets the end-user drag the line marker to the desired position on the plot area. In the later case, you can specify whether you want to allow dragging of the content by setting the DragContent property. Similarly, DragLines property defines whether the vertical and horizontal lines are linked to each other when one of them is dragged. Moreover, FlexChart also allows you to specify the default position of the line markers when chart is first loaded using the VerticalPosition and HorizontalPosition properties. These properties accept the double type value ranging between 0 to 1.

    C1.Win.Chart.Interaction.LineMarker lineMarker = new C1.Win.Chart.Interaction.LineMarker(this.flexChart1);
    
    //Set whether to show horizontal, vertical or both line markers
    lineMarker.Lines = C1.Win.Chart.Interaction.LineMarkerLines.Both;
    
    //Set the default position of the marker on load
    lineMarker.VerticalPosition = 0.2;
    lineMarker.HorizontalPosition = 0.3;
    
    //Set where to show line marker content relative to the cross-section (horizontal, vertical line markers)
    lineMarker.Alignment = C1.Win.Chart.Interaction.LineMarkerAlignment.Right;
    
    //Let the user move the line marker by dragging
    lineMarker.Interaction = C1.Win.Chart.Interaction.LineMarkerInteraction.Drag;
    
    //Update the line marker when user drags the content
    lineMarker.DragContent = true;
    
    //Set whether the two marker lines are linked when dragged
    lineMarker.DragLines = true;
    
    //Set custom content for line marker
    lineMarker.Content = "Total revenue generated ${Revenue} by the sales of {Orders} units";
    
    Dim lineMarker As New C1.Win.Chart.Interaction.LineMarker(Me.flexChart1)
    
    'Set whether to show horizontal, vertical Or both line markers
    lineMarker.Lines = C1.Win.Chart.Interaction.LineMarkerLines.Both
    
    'Set the default position of the marker on load
    lineMarker.VerticalPosition = 0.2
    lineMarker.HorizontalPosition = 0.3
    
    'Set where to show line marker content relative to the cross-section (horizontal, vertical line markers)
    lineMarker.Alignment = C1.Win.Chart.Interaction.LineMarkerAlignment.Right
    
    'Let the user move the line marker by dragging
    lineMarker.Interaction = C1.Win.Chart.Interaction.LineMarkerInteraction.Drag
    
    'Update the line marker when user drags the content
    lineMarker.DragContent = True
    
    'Set whether the two marker lines are linked when dragged
    lineMarker.DragLines = True
    
    'Set custom content for line marker
    lineMarker.Content = "Total revenue generated ${Revenue} by the sales of {Orders} units"
    
    See Also