## Marker

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

In the example below, the vertical and horizontal lines, both get displayed when mouse is hovered over the plot area. The data values corresponding to the marker position are displayed next to x and y axes.

<wj-financial-chart #chart [itemsSource]="data" [header]="header" chartType="Candlestick" [symbolSize]="4" (rendered)="chartRendered()" bindingX="date"> <wj-financial-chart-series binding="high,low,open,close"></wj-financial-chart-series> <wj-flex-line-marker lines="Both" interaction="Move" [alignment]="7" [content]="changeContent" (positionChanged)="midPosChanged($event)"> </wj-flex-line-marker> <wj-flex-line-marker lines="None" interaction="Move" [horizontalPosition]="1" [content]="changeYContent"> </wj-flex-line-marker> <wj-flex-line-marker lines="None" interaction="Move" [verticalPosition]="1" [content]="changeXContent"> </wj-flex-line-marker> </wj-financial-chart>
import * as wjcCore from 'wijmo/wijmo'; import * as wjcChartFinance from 'wijmo/wijmo.chart.finance'; import { Component, ViewChild, Inject} from '@angular/core'; import { DataSvc } from './../services/DataSvc'; //Marker sample component @Component({ selector: 'marker-cmp', templateUrl: 'src/components/MarkerCmp.html' }) export class MarkerCmp { dataSvc: DataSvc; data: any[]; header: string; changeContent: Function; changeYContent: Function; changeXContent: Function; pt: wjcCore.Point; markcontents; pOffset: wjcCore.Rect; @ViewChild('chart') chart: wjcChartFinance.FinancialChart; constructor( @Inject(DataSvc) dataSvc: DataSvc) { this.data = []; this.pt = new wjcCore.Point(); this.dataSvc = dataSvc; this.setDataSource(); this.header = 'Facebook, Inc. (FB)'; this.changeContent = () => { this.markcontents = this._getMarkerContents(new wjcCore.Point(this.pt.x, this.pt.y)); return this.markcontents ? this.markcontents.content : ''; }; this.changeXContent = () => { return this.markcontents && this.markcontents.x ? this.markcontents.x.toString() : ''; }; this.changeYContent = () => { return this.markcontents && this.markcontents.y ? this.markcontents.y.toString() : ''; }; } midPosChanged(event) { this.pt = event; } chartRendered() { var chart = this.chart; if (!chart) { return; } chart.tooltip.content = ''; chart.axisY.position = 3; chart.rendered.addHandler(() => { var chartHostEle = chart.hostElement, pa = chartHostEle.querySelector('.wj-plot-area'); this.pOffset = wjcCore.getElementRect(pa); }); var lineMarkers = chart.hostElement.querySelectorAll('.wj-chart-linemarker-container'); console.log(lineMarkers.length); console.log(chart.hostElement); this._markershowing(lineMarkers, 'hidden'); chart.hostElement.onmouseenter = e => { this._markershowing(lineMarkers, 'visible'); } if ('ontouchstart' in window) { chart.hostElement.ontouchstart = e => { this._markershowing(lineMarkers, 'visible'); } } chart.hostElement.onmouseleave = e => { this._markershowing(lineMarkers, 'hidden'); } } private _markershowing(lineMarkers, visible) { for (var i = 0; i < lineMarkers.length; i++) { lineMarkers[i].style.visibility = visible; } } //get line marker content private _getMarkerContents(pt) { var chart = this.chart, newHitPoint = new wjcCore.Point(pt.x, NaN), ht, xContent, yContent, axisYMax, axisYMin, content = ''; if (!chart || chart.series.length < 1) { return; } axisYMax = chart.axisY.actualMax; axisYMin = chart.axisY.actualMin; //calculate the y value if (this.pOffset == null) { yContent = 0; } else { yContent = axisYMax - ((pt.y - this.pOffset.top) / this.pOffset.height) * (axisYMax - axisYMin); yContent = yContent.toFixed(2); } ht = chart.series[0].hitTest(newHitPoint); if (ht.x && ht.y !== null) { xContent = ht.x; } return { content: '', x: xContent, y: yContent }; } private setDataSource() { this.dataSvc.getData().subscribe(data => { this.data = data; }); } }

#### Result (live):