Price Indicator

Overview

Price Indicator is an addition to Crosshair that allows to create a label on any axis to show price from a certain date, it may last price, current price or any other value.

Enable

// enable price indicator for the first plot
var chart = anychart.stock();
var indicator = chart.plot(0).priceIndicator({value: "last-visible"});

JsFiddle Playground

Binding

There are three main things you need to set to make price indicatot work correctly:

Series and Field

Two methods, the valueField() and the series() are used to define a series and a value field.

Here is an example where the price indicator is shown for two series and minimal settings are made:

// set the data
table = anychart.data.table();
table.addData([        
  ['2016-04-01', 18.23, 19.36, 18.18, 19.31, 1284],
  ['2016-04-02', 19.50, 19.89, 19.00, 19.29, 1384],
  ['2016-04-03', 19.13, 19.15, 18.43, 18.75, 1484],
  ['2016-04-06', 18.54, 18.76, 18.27, 18.76, 1484],
  ['2016-04-07', 18.76, 19.14, 18.63, 18.76, 1584]
]);
  
// map the data
mapping = table.mapAs({'open': 1, 'high': 2,'low': 3,'close':4, 'value': 5});

// create a chart
chart = anychart.stock();

// add two series
ohlcSeries = chart.plot(0).ohlc(mapping);
lineSeries = chart.plot(1).line(mapping);

// add indicator to OHLC series
var indicator1 = chart.plot(0).priceIndicator();
indicator1.series(ohlcSeries);
indicator1.valueField('high');

// add indicator to line series
var indicator2 = chart.plot(1).priceIndicator({'series': lineSeries});

There is a shorter way to set this, using object overload:

var indicator1 = chart.plot(0).priceIndicator({'series': ohlcSeries, valueField: 'high')
var indicator2 = chart.plot(1).priceIndicator({'series': lineSeries});

Here is a sample showcasing both ways:

JsFiddle Playground

Source Value

The parameter set by value() defines which date price indicator bind to.

There are five options to the value, four of them come from anychart.enums.PriceIndicatorDataSource:

  • 'series-start' (default),
  • 'series-end',
  • 'first-visible',
  • 'last-visible',
  • any Date you set.
// enable price indicator for the first plot
var chart = anychart.stock();
var indicator = chart.plot(0).priceIndicator();
indicator.value('first-visible');

Here is a sample of a chart with three price indicators, each tracks the same series but the source of the value is different:

indicator1 = chart.plot(0).priceIndicator(0, {value: 'first-visible'});
indicator2 = chart.plot(0).priceIndicator(1, {value: 'series-end'});
indicator3 = chart.plot(0).priceIndicator(2, {value: '2006-08-09'});

JsFiddle Playground

Axis

If plot has several axis you can choose an axis where to show indicator, use the axis() method or define axis in initial object config:

// set axis using the method and axis index
indicator1 = chart.plot(0).priceIndicator(0);
indicator1.axis(0);

// set axis using object and link to axis
indicator2 = chart.plot(0).priceIndicator(1, {axis: chart.plot(0).yAxis(1)});

JsFiddle Playground

Appearance

The following set of methods give provide you with ability to define how price indicator label and line looks like.

var indicator = chart.plot(0).priceIndicator();
// set line settings
indicator.stroke("Black", 2, "2 2");
// configure label
indicator.label().background().fill("White");
indicator.label().fontColor("Black");

JsFiddle Playground