Wijmo
Chart
5.20231.904
wijmo.chart Class LineMarker Wijmo API Class

LineMarker Class

Represents an extension of the LineMarker for the FlexChart.

The LineMarker consists of a text area with content reflecting data point values, and optional vertical or horizontal lines (or both for a cross-hair effect) positioned over the plot area.

It can be static (interaction = None), follow the mouse or touch position (interaction = Move), or move when the user drags the line (interaction = Drag).

For example:

  // create an interactive marker with a horizontal line and y-value
  var lm = new LineMarker($scope.ctx.chart, {
      lines: LineMarkerLines.Horizontal,
      interaction: LineMarkerInteraction.Move,
      alignment : LineMarkerAlignment.Top
  });
  lm.content = function (ht) {
      // show y-value
      return lm.y.toFixed(2);
  }

Heirarchy

Constructors

Properties

Methods

Events

Constructors

constructor

  • Initializes a new instance of the LineMarker class.

    Parameters

    • chart: FlexChartCore

      The chart on which the LineMarker appears.

    • Optional options: any

      A JavaScript object containing initialization data for the control.

    Returns LineMarker

Properties

alignment

alignment: LineMarkerAlignment

Gets or sets the alignment of the LineMarker content.

By default, the LineMarker shows to the right, at the bottom of the target point. Use '|' to combine alignment values.

// set the alignment to the left.
marker.alignment = LineMarkerAlignment.Left;
// set the alignment to the left top.
marker.alignment = LineMarkerAlignment.Left | LineMarkerAlignment.Top;

chart

chart: FlexChartCore

Gets the FlexChart object that owns the LineMarker.

content

content: Function

Gets or sets the content function that allows you to customize the text content of the LineMarker.

dragContent

dragContent: boolean

Gets or sets a value indicating whether the content of the marker is draggable when the interaction mode is "Drag."

dragLines

dragLines: boolean

Gets or sets a value indicating whether the lines are linked when the horizontal or vertical line is dragged when the interaction mode is "Drag."

dragThreshold

dragThreshold: number

Gets or sets the maximum distance from the horizontal or vertical line that the marker can be dragged.

horizontalPosition

horizontalPosition: number

Gets or sets the horizontal position of the LineMarker relative to the plot area.

Its value range is (0, 1). If the value is null or undefined and interaction is set to LineMarkerInteraction.Move or LineMarkerInteraction.Drag, the horizontal position of the marker is calculated automatically based on the pointer's position.

interaction

interaction: LineMarkerInteraction

Gets or sets the interaction mode of the LineMarker.

isVisible

isVisible: boolean

Gets or sets the visibility of the LineMarker.

lines

lines: LineMarkerLines

Gets or sets the visibility of the LineMarker lines.

seriesIndex

seriesIndex: number

Gets or sets the index of the series in the chart in which the LineMarker appears. This takes effect when the interaction property is set to LineMarkerInteraction.Move or LineMarkerInteraction.Drag.

verticalPosition

verticalPosition: number

Gets or sets the vertical position of the LineMarker relative to the plot area.

Its value range is (0, 1). If the value is null or undefined and interaction is set to LineMarkerInteraction.Move or LineMarkerInteraction.Drag, the vertical position of the LineMarker is calculated automatically based on the pointer's position.

x

x: number

Gets the current x-value as chart data coordinates.

y

y: number

Gets the current y-value as chart data coordinates.

Methods

onPositionChanged

  • onPositionChanged(point: Point): void

  • Raises the positionChanged event.

    Parameters

    • point: Point

      The target point at which to show the LineMarker.

    Returns void

remove

  • remove(): void

  • Removes the LineMarker from the chart.

    Returns void

Events

positionChanged

positionChanged: Event<LineMarker, Point>

Occurs after the LineMarker's position changes.