{"id":20165,"date":"2020-08-10T13:50:30","date_gmt":"2020-08-10T13:50:30","guid":{"rendered":"http:\/\/www.highcharts.com\/blog\/?p=20165"},"modified":"2026-01-13T09:59:03","modified_gmt":"2026-01-13T09:59:03","slug":"calculating-and-drawing-a-linear-regression-using-highcharts","status":"publish","type":"post","link":"https:\/\/www.highcharts.com\/blog\/tutorials\/calculating-and-drawing-a-linear-regression-using-highcharts\/","title":{"rendered":"Calculate and draw a linear regression using Highcharts"},"content":{"rendered":"<p>Linear regression is a simple, yet powerful mathematical tool for modeling and predicting data trends. In a nutshell, linear regressions let us predict the value of the dependent variable y using a value of the independent variable x. It is used in many fields, such as machine learning and finance, which we will use as examples here.<\/p>\n<p>In this tutorial, we will explore the linear regression concept and show how you can easily plot a regression line using Highcharts.<\/p>\n<h2>Linear regression in machine learning<\/h2>\n<p>The main purpose of using linear regression in machine learning is to model and analyze a relationship between variables (independent variable x and dependent variable y). The model will help us to forecast and predict the value of the y using a known value of x. The mathematical model for a simple regression line is an equation <code>Y= B*X + A<\/code>. The <code>B<\/code> is the slope that is equal to <code>r*(Sy\/Sx)<\/code> where <code>r<\/code> is the correlation coefficient, <code>Sy<\/code> is the standard deviation of y values and <code>Sx<\/code> is the standard deviation of x value. The equation of <code>A<\/code> (the intercept) is equal to the <code>meanY-(B*meanX)<\/code>, where meanY and meanX are the means of the y values and x values, respectively.<\/p>\n<p>The following demo displays the relationship between the height and weight of the 2012 Olympic rugby sevens athletes:<\/p>\n<p><i><b>Remark<\/b><br \/>\nFor more details on how to create such demos feel free to refer to <a href=\"https:\/\/www.highcharts.com\/blog\/tutorials\/data-science-and-highcharts-linear-regression\/\" target=\"_blank\" rel=\"noopener noreferrer\">Data science and Highcharts: linear regression<\/a>.<\/i><\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" src=\"https:\/\/codepen.io\/mushigh\/embed\/ZEQxXOz?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"700\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" title=\"A line chart and a scatter chart display the relationship between the height and weight of the 2012 Olympic rugby sevens athletes. By Mustapha Mekhatria\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/ZEQxXOz\">Linear regression and scatter of Rugby Sevens<\/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<p>Each blue dot represents the height and weight of an athlete, where the red line is the mathematical model of the relationship between the height and weight of all 2012 Olympic rugby sevens athletes.<\/p>\n<h2>Linear regression in finance<\/h2>\n<p>In finance, linear regression is used to predict\/forecast the next price movement based on a previous price values period. (The trade name in finance is a \u201cLinear Regression Indicator\u201d and part of a family of statistical tools referred to as \u201cTechnical Indicators\u201d). This indicator plots a series of points that are the end of a linear regression of the last N points. The end result will be a line, not necessarily linear, of all the calculated points (see <a href=\"https:\/\/codepen.io\/mushigh\/pen\/LYNVXPB\" target=\"_blank\" rel=\"noopener noreferrer\">demo below<\/a>).<\/p>\n<p class=\"demo-container\"><iframe style=\"width: 100%;\" src=\"https:\/\/codepen.io\/mushigh\/embed\/LYNVXPB?height=265&amp;theme-id=light&amp;default-tab=result\" height=\"550\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\" title=\"A stock chart and a linear regression line display the AAPL stock price. By Mustapha Mekhatria\"><span data-mce-type=\"bookmark\" style=\"display: inline-block; width: 0px; overflow: hidden; line-height: 0;\" class=\"mce_SELRES_start\">\ufeff<\/span><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/mushigh\/pen\/LYNVXPB\">Linear regression in finance<\/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<p>The chart above displays the AAPL stock price and two linear regression indicators over a period of 5 price points (black line) and 100 (green line) price points. By the way, a period refers to the number of values; for instance, a period of 5 in finance includes five price points\/values.<br \/>\nWe can easily notice that the accuracy of prediction is higher when the period is lower. So the line using a period of 5 is more accurate than the line with a period of 100. (However, \u201caccurate\u201d is dependent on your analysis goal. To better understand what different period regression lines may tell you, check out this <a href=\"https:\/\/www.daytrading.com\/linear-regression-line\" target=\"_blank\" rel=\"noopener noreferrer\">article<\/a>.)<\/p>\n<p>As the points are processed based on the last period of values, the first point of the linear regression lines are plotted according to the length of the periods (see picture below):<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-20758\" src=\"https:\/\/wp-assets.highcharts.com\/www-highcharts-com\/blog\/wp-content\/uploads\/2020\/08\/10140702\/image2.jpg\" alt=\" linear regression\" width=\"728\" height=\"407\" \/><\/p>\n<p>Note, that when using Highcharts Stock, you don\u2019t need to pre-process your raw data in order to draw a regression line. Just enable the Technical Indicator via the API, or manually via our Stock Tools GUI. (See all available <a href=\"https:\/\/www.highcharts.com\/docs\/stock\/technical-indicator-series\" target=\"_blank\" rel=\"noopener noreferrer\">Technical Indicators<\/a>.)<\/p>\n<p>As you may suspect, the use case for finance is slightly different than for machine learning. For machine learning, the task is to create a data-model and visualize the correlations. In finance, the Linear Regression Indicator is more of a forecasting tool, as predicting price changes is what it\u2019s all about.<\/p>\n<p>We hope that this article sheds some light upon the main differences in using the concept of linear regression in different contexts.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Explore how to create an interactive linear regression using Highcharts for financial and machine learning applications.<\/p>\n","protected":false},"author":32,"featured_media":20166,"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-20165","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\/20165","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=20165"}],"version-history":[{"count":1,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20165\/revisions"}],"predecessor-version":[{"id":29314,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/posts\/20165\/revisions\/29314"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media\/20166"}],"wp:attachment":[{"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/media?parent=20165"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/categories?post=20165"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/tags?post=20165"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.highcharts.com\/blog\/wp-json\/wp\/v2\/coauthors?post=20165"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}