{"id":6509,"date":"2018-09-19T09:17:48","date_gmt":"2018-09-19T09:17:48","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=6509"},"modified":"2018-12-27T05:18:09","modified_gmt":"2018-12-27T05:18:09","slug":"current-price-indicator-custom-value-scale-calculation-javascript-stock-charts","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2018\/09\/19\/current-price-indicator-custom-value-scale-calculation-javascript-stock-charts\/","title":{"rendered":"Current Price Indicator with Custom Value and Scale Calculation in JavaScript Stock Charts \u2014 Challenge AnyChart!"},"content":{"rendered":"

\"CurrentFurther inspired by noteworthy questions our Support Team<\/a> receives from customers, we resume the Challenge AnyChart!<\/a> feature, demonstrating huge flexibility of our JavaScript (HTML5) charting libraries<\/a> and explaining how exactly you can solve advanced data visualization tasks with the help of AnyChart. Today\u2019s tutorial is about JS stock charts, and more precisely, we’ll dive into how to draw the Current Price Indicator with a custom value and make it visible even when zooming and scrolling, by utilizing Axis Markers.<\/p>\n

<\/p>\n

Data Visualization Task<\/h2>\n

The question a customer wanted us to answer\u00a0was as follows:<\/p>\n

How to visualize the CPI (Current Price Indicator) with a custom value in such a way that it is visible when scrolling or zooming?<\/strong><\/em><\/p><\/blockquote>\n

In fact, you can make such a stock chart using our AnyStock JavaScript library<\/a>. In the 8.3.0 release of AnyChart JS Charts<\/a>, it received the new Axis Marker feature which will be helpful in this case, namely the lineMarker()<\/a>\u00a0and\u00a0textMarker()<\/a>\u00a0methods.<\/p>\n

Solution Overview<\/h2>\n

To begin with, draw an open-high-low-close (OHLC) series<\/a> on the chart.<\/p>\n

After that, create a variable with a custom value, pass it to the line and text markers, and make them visible when scrolling\u00a0and zooming.<\/p>\n

Axis Markers<\/h2>\n

The Axis Markers feature\u00a0makes it easy to create markers and set them up as\u00a0you want.<\/p>\n

The first thing\u00a0you need here is to\u00a0specify a custom value like this:<\/p>\n

var markerValue = 8200;\r\n<\/code><\/pre>\n
Once the value is set, it should be passed to the marker’s settings:<\/p>\n
var lineMarker = plot.lineMarker();\r\nlineMarker\r\n .value(markerValue)\r\n .scaleRangeMode('consider');\r\n\r\nvar textMarker = plot.textMarker();\r\ntextMarker\r\n .text(markerValue)\r\n .value(markerValue)\r\n<\/code><\/pre>\n
The\u00a0scaleRangeMode(‘consider’)<\/a>\u00a0method in the code snippet above makes the marker value considered in the scale calculation,\u00a0ensuring the marker is visible no matter what data range is selected.<\/p>\n
That\u2019s it! Here is a JavaScript (HTML5) stock chart with\u00a0the custom value-based CPI<\/a>.<\/p>\n