{"id":14149,"date":"2017-11-13T17:43:42","date_gmt":"2017-11-13T17:43:42","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=14149"},"modified":"2026-01-12T09:34:13","modified_gmt":"2026-01-12T09:34:13","slug":"creating-custom-technical-indicators-financial-charts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/creating-custom-technical-indicators-financial-charts\/","title":{"rendered":"Creating custom technical indicators for your financial charts"},"content":{"rendered":"<p>&nbsp;<\/p>\n<p>A technical indicator is a series of data points generated by applying a formula to a security\u2019s price data. Technical indicators are used in forecasting market directions as they allow for an alternative interpretation of the strength and direction of the underlying price action.<\/p>\n<p>Highstock version 6 and later offers more than <a href=\"https:\/\/www.highcharts.com\/docs\/chart-and-series-types\/technical-indicator-series\">20 built-in technical indicators<\/a>. If you are a trader or just a financial enthusiastic, you would probably like to have the possibility to create some custom technical indicators of your own to Highstock. This is easy to do. Read on to learn how to create a custom technical indicator, step by step.<\/p>\n<p>For this tutorial, I create a simple linear regression indicator. All I need is the indicator\u2019s formula to implement it in the code. If you want to know more about a simple linear indicator just click <a href=\"https:\/\/en.wikipedia.org\/wiki\/Simple_linear_regression\">here<\/a>.<\/p>\n<h2>Technical indicator and Highstock<\/h2>\n<p>In Highstock, all technical indicators are new series types; technical indicators are connected to the main series by the <code>linkedTo<\/code> option.<br \/>\nYou can check in this demo how the volume by price (vbp) indicator is linked to the series AAPL:<\/p>\n<pre>{\r\n            type: 'candlestick',\r\n            name: 'AAPL',\r\n            id: 'aapl',\r\n            zIndex: 2,\r\n            data: ohlc\r\n        }, {\r\n            type: 'vbp',\r\n            linkedTo: 'aapl',\r\n            params: {\r\n                volumeSeriesID: 'volume'\r\n            },\r\n\r\n<\/pre>\n<p><iframe style=\"width: 100%; height: 570px;\" src=\"https:\/\/www.highcharts.com\/samples\/stock\/demo\/sma-volume-by-price\/\" frameborder=\"0\"><\/iframe><\/p>\n<p>Each technical indicator requires the method <code>getValues()<\/code> to be implemented. This method takes two arguments and returns an object. The arguments are the main series and the parameters. The parameters are specific to a technical indicator. Check the structure of the method <code>getValue()<\/code>:<\/p>\n<pre>function getValues(series, params) {\r\n  \/\/ calculations\r\n  ...\r\n  \/\/ end of calculations\r\n  return {\r\n    xData: [...], \/\/ array of x-values\r\n    yData: [...] \/\/ array of y-values\r\n    values: [...], \/\/ array of points\r\n  };\r\n}\r\n<\/pre>\n<p>In Highstock all technical indicators are series types, and to create a new series, the following method <code>Highcharts.seriesType()<\/code> is used. I include the indicators module <code>indicators.js<\/code>, to load the indicators\u2019 core-logic.<br \/>\nYou can see that I am calling the linear regression function inside the getValues method. Yes, this is the name of our indicator mathematical function.<\/p>\n<pre>src=\"https:\/\/code.highcharts.com\/stock\/indicators\/indicators.js\"&gt;\r\nHighcharts.seriesType(\r\n  'linearregression',\r\n  'sma',\r\n  {\r\n    name: 'Linear Regression',\r\n    params: {} \/\/ linear regression doesn\u2019t need params\r\n  },\r\n  {\r\n    getValues: function (series, params) {\r\n      return this.getLinearRegression(series.xData, series.yData);\r\n    },\r\n    getLinearRegression: getLinearRegression\r\n  }\r\n);\r\n<\/pre>\n<p>Now, the main highcharts structure to create the indicator is set. Let&#8217;s see how to build the indicator\u2019s mathematical function <code>getLinearRegression()<\/code><\/p>\n<h2>From math to JavaScript&#8230;<\/h2>\n<p>The simple linear regression formula defined as:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-14156 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173127\/1-formula.png\" alt=\"\" width=\"132\" height=\"54\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173127\/1-formula.png 650w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173127\/1-formula-560x229.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173127\/1-formula-360x147.png 360w\" sizes=\"auto, (max-width: 132px) 100vw, 132px\" \/><\/p>\n<p>Where the slope is:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-14157 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173146\/2-formula.png\" alt=\"\" width=\"166\" height=\"73\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173146\/2-formula.png 714w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173146\/2-formula-560x245.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173146\/2-formula-360x157.png 360w\" sizes=\"auto, (max-width: 166px) 100vw, 166px\" \/><\/p>\n<p>And offset:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-14158 aligncenter\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173201\/3-formula.png\" alt=\"\" width=\"153\" height=\"66\" srcset=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173201\/3-formula.png 566w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173201\/3-formula-560x239.png 560w, https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2017\/11\/13173201\/3-formula-360x154.png 360w\" sizes=\"auto, (max-width: 153px) 100vw, 153px\" \/><\/p>\n<p>The JavaScript of the formulas above looks like this:<\/p>\n<pre>function getLinearRegression(xData, yData) {\r\n  var sumX = 0,\r\n      sumY = 0,\r\n      sumXY = 0,\r\n      sumX2 = 0,\r\n      linearData = [],\r\n      linearXData = [],\r\n      linearYData = [],\r\n      n = xData.length,\r\n      alpha, beta, i, x, y;\r\n\r\n  \/\/ Get sums:\r\n  for (i = 0; i &lt; n; i++) {\r\n    x = xData[i];\r\n    y = yData[i];\r\n    sumX += x;\r\n    sumY += y;\r\n    sumXY += x * y;\r\n    sumX2 += x * x;\r\n  }\r\n  \r\n  \/\/ Get slope and offset:\r\n  alpha = (n * sumXY - sumX * sumY) \/ (n * sumX2 - sumX * sumX);\r\n  if (isNaN(alpha)) {\r\n    alpha = 0;\r\n  }\r\n  beta = (sumY - n * sumX)\/ n;\r\n\r\n  \/\/ Calculate linear regression:\r\n  for (i = 0; i &lt; n; i++) {\r\n    x = xData[i];\r\n    y = alpha * x + beta;\r\n\r\n    \/\/ Prepare arrays required for getValues() method\r\n    linearData[i] = [x, y];\r\n    linearXData[i] = x;\r\n    linearYData[i] = y;\r\n  }\r\n\r\n  return {\r\n    xData: linearXData,\r\n    yData: linearYData,\r\n    values: linearData\r\n  };\r\n}\r\n<\/pre>\n<p>That\u2019s it; we are done; our indicator is ready \ud83d\ude42 and this is how to use:<\/p>\n<pre>series: [{\r\n  id: 'main',\r\n  type: 'scatter',\r\n  data: [ ... ]\r\n}, {\r\n  type: 'linearregression',\r\n  linkedTo: 'main'\r\n}]\r\n<\/pre>\n<p class=\"demo-container\">\n<iframe loading=\"lazy\" width=\"100%\" height=\"550\" src=\"\/\/jsfiddle.net\/mushigh\/qct1nx7r\/embedded\/result\/\" allowfullscreen=\"allowfullscreen\" allowpaymentrequest frameborder=\"0\"><\/iframe>\n<\/p>\n<p>I also set up two more demos just for fun:<\/p>\n<ul>\n<li><a href=\"http:\/\/jsfiddle.net\/an8nno4w\/\">AAPL Stock Price<\/a>.<\/li>\n<li><a href=\"http:\/\/jsfiddle.net\/ufwku6a3\/\">Average Monthly Temperature and Rainfall in Tokyo<\/a>.<\/li>\n<\/ul>\n<p>One last thing: To increase the visibility of your chart using the linear regression series, you may want to disable tooltip and\/or markers, as the purpose here is more to visualize data than showing exact values. Just got to the <code>seriesType()<\/code>,and set default options for that series:<\/p>\n<pre>Highcharts.seriesType(\r\n  'linearregression',\r\n  'sma',\r\n  {\r\n    name: 'Linear Regression',\r\n    enableMouseTracking: false, \/\/ default options\r\n    marker: {\r\n      enabled: false\r\n    }\r\n    params: {} \/\/ linear regression doesn\u2019t need params\r\n  },\r\n  {\r\n    getValues: ... ,\r\n    getLinearRegression: ... \r\n  }\r\n);\r\n<\/pre>\n<p>As you can see, it is easy to create a technical indicator of your own. Feel free to share your own experience about the creating of indicators in the comment section below.<\/p>\n<p>Btw, you are also always welcome to post a technical indicator request on <a href=\"https:\/\/highcharts.uservoice.com\/forums\/55896-highcharts-javascript-api\">Highcharts UserVoice<\/a>, as more popular technical indicators will be implemented in the future.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create custom technical indicators with Highcharts<\/p>\n","protected":false},"author":48,"featured_media":14371,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"meta_title":"","meta_description":"","hc_selected_options":[],"footnotes":""},"categories":[210],"tags":[788,883],"coauthors":[727],"class_list":["post-14149","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-finance","tag-highcharts-stock"],"_links":{"self":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/14149","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/users\/48"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=14149"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/14149\/revisions"}],"predecessor-version":[{"id":29112,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/14149\/revisions\/29112"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/14371"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=14149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=14149"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=14149"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=14149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}