{"id":20817,"date":"2021-05-05T16:01:35","date_gmt":"2021-05-05T16:01:35","guid":{"rendered":"https:\/\/www.highcharts.com\/blog\/?p=20817"},"modified":"2026-01-13T11:19:11","modified_gmt":"2026-01-13T11:19:11","slug":"five-useful-technical-indicators-part-1","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/five-useful-technical-indicators-part-1\/","title":{"rendered":"Five useful technical indicators (Part 1)"},"content":{"rendered":"<p>&nbsp;<br \/>\nIn my previous article, I shared with you the <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/7-popular-technical-indicators\/\" target=\"_blank\" rel=\"noopener\">7 popular technical indicators<\/a>. In this article, I will go through five technical indicators that are very useful for trading and how you can create them with the Highcharts Stock library:<\/p>\n<ol>\n<li>On-Balance Volume (OBV)<\/li>\n<li>Disparity Index<\/li>\n<li>Directional Movement Index (DMI)<\/li>\n<li>Klinger Oscillator<\/li>\n<li>Chande Momentum Oscillator (CMO)<\/li>\n<\/ol>\n<p>For the sake of simplicity, this subject is divided into two articles. This article is about the two first technical indicators: On-Balance Volume (OBV) and Disparity Index. In the <a href=\"https:\/\/www.highcharts.com\/blog\/post\/five-useful-technical-indicators-part-2\/\" target=\"_blank\" rel=\"noopener\">next article<\/a>, I will cover Directional Movement Index (DMI), Klinger Oscillator, and Chande Momentum Oscillator (CMO).<\/p>\n<p>Let\u2019s get started<\/p>\n<h2>On-Balance Volume (OBV) <\/h2>\n<p>On-Balance Volume, or OBV for short, is a technical trading momentum indicator that relies on volume flow to forecast stock prices\u2019 change. In a nutshell, the On-balance Volume indicator helps traders to predict the price movement based on the volume.<br \/>\nThe On-Balance Volume graph is calculated based on the following rules:<\/p>\n<ol>\n<li>If a bar&#8217;s closing price is higher than the previous bar\u2019s closing price, their volumes are summed together.<\/li>\n<li>If a bar&#8217;s closing price is lower than the previous bar\u2019s closing price, their volumes are subtracted.<\/li>\n<li>If the closing price of a bar is equal to the previous bar\u2019s closing price, the volume remains the same. <\/li>\n<\/ol>\n<p class=\"demo-container\"><iframe height=\"700\" style=\"width: 100%;\" scrolling=\"no\" title=\"Highcharts Stock Demo. Author(s): Karol Kolodziej\" src=\"https:\/\/codepen.io\/mushigh\/embed\/jOBOEbe?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/jOBOEbe'>Highcharts Stock Demo. Author(s): Karol Kolodziej<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2>How to create an On-Balance Volume with Highcharts?<\/h2>\n<p>Here are the steps to display an On-Balance Volume technical indicator:<\/p>\n<ol>\n<li>Be sure to add the main indicator module\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/stock\/indicators\/indicators.js\"&gt;&lt;\/script&gt;<\/pre>\n<\/li>\n<li>Add the On-Balance Volume module\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/stock\/indicators\/obv.js\"&gt;&lt;\/script&gt;<\/pre>\n<\/li>\n<li>Use the <code>obv<\/code> type series:\n<pre>{\r\n  linkedTo: 'AAPL',\r\n  type: 'obv',\r\n  params: {\r\n    volumeSeriesID: 'volume'\r\n  },\r\n  showInLegend: true,\r\n  yAxis: 2\r\n}<\/pre>\n<\/li>\n<\/ol>\n<h2>Disparity Index<\/h2>\n<p>Like the On-Balance Volume indicator, the disparity index is a momentum indicator used to forecast the price relative to a moving average. Basically, each point of the disparity index chart is the percentage of the point\u2019s current price versus the moving average. That is why you need to choose the moving average of your choice as a parameter to calculate the disparity index.<\/p>\n<p class=\"demo-container\"><iframe height=\"500\" style=\"width: 100%;\" scrolling=\"no\" title=\"Highstock Demo.  author(s): Rafal Sebestjanski\" src=\"https:\/\/codepen.io\/mushigh\/embed\/NWpWPxB?height=265&#038;theme-id=light&#038;default-tab=result\" frameborder=\"no\" loading=\"lazy\" allowtransparency=\"true\" allowfullscreen=\"true\"><br \/>\n  See the Pen <a href='https:\/\/codepen.io\/mushigh\/pen\/NWpWPxB'>Highstock Demo.  author(s): Rafal Sebestjanski<\/a> by mustapha mekhatria<br \/>\n  (<a href='https:\/\/codepen.io\/mushigh'>@mushigh<\/a>) on <a href='https:\/\/codepen.io'>CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<h2>How to create a Disparity Index with Highcharts?<\/h2>\n<p>Here are the steps to display a Disparity Index technical indicator:<\/p>\n<ol>\n<li>Be sure to add the main indicator module\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/stock\/indicators\/indicators.js\"&gt;&lt;\/script&gt;<\/pre>\n<\/li>\n<li>Add the Disparity Index module\n<pre>&lt;script src=\"https:\/\/code.highcharts.com\/stock\/indicators\/disparity-index.js\"&gt;&lt;script&gt;<\/pre>\n<\/li>\n<li>Use the disparityindex type series:\n<pre>{\r\n  type: 'disparityindex',\r\n  linkedTo: 'aapl',\r\n  yAxis: 1,\r\n  params: {\r\n    period: 9\r\n  }\r\n}<\/pre>\n<\/li>\n<li>Be sure to set the Moving average number in the period parameter<br \/>\n  params: <\/p>\n<pre>{\r\n  period: 9\r\n}<\/pre>\n<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<p>Now, you know how to create On-Balance Volume (OBV) and Disparity Index with Highcharts Stock. Feel free to jump to <a href=\"https:\/\/www.highcharts.com\/blog\/post\/five-useful-technical-indicators-part-2\/\" target=\"_blank\" rel=\"noopener\">the next part<\/a> to know more about Directional Movement Index (DMI), Klinger Oscillator, and Chande Momentum Oscillator (CMO).<\/p>\n<p>Don\u2019t forget to try it out and share your thoughts and comments in the comment section below.<br \/>\n&nbsp;<\/p>\n<hr>\n<div class=\"text-center mb6\">\n<a href=\"https:\/\/shop.highsoft.com\" class=\"btn btn-primary\">Buy Highcharts 9.1<\/a><br \/>\n<a href=\"\/download\" class=\"btn btn-secondary\">Download Highcharts 9.1*<\/a>\n<\/div>\n<div class=\"text-center\">\n<p><em>*You can only upgrade to Highcharts 9.1.0 for free if you have an <strong>active Advantage<\/strong>, or you&#8217;re using Highcharts for a personal website, a school website or a non-profit organization.<\/em><\/p>\n<p><em><strong>What is advantage?<\/strong><br \/>\nAdvantage gives you access to all new software releases (minor and major) and our extended support offering for the duration of your Advantage term.<\/em><\/p>\n<p><em>If you need to renew your inactive Advantage or have related questions, please contact our <a href=\"https:\/\/shop.highsoft.com\/contact\">sales team<\/a>.<\/em><\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Learn how to create the following technical indicators with Highcharts Stock: On-Balance Volume (OBV) and Disparity Index<\/p>\n","protected":false},"author":32,"featured_media":20834,"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":[699],"class_list":["post-20817","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\/20817","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\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/comments?post=20817"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20817\/revisions"}],"predecessor-version":[{"id":29345,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20817\/revisions\/29345"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20834"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20817"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20817"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20817"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20817"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}