Does Highcharts have a "trend line" feature?

Question

Basically, I'm trying to have Highcharts automatically draw a straight line going from the first data point to the last, so that I can see the "overall trend" more easily.

I believe this is called a "trend line" or something, but I have not found anything in the documentation related to that. It is very possible that it still has this feature, however. Does it?

Frightened

If you are still looking for this see this answer I gave: https://mcmap.net/q/1634925/-how-to-create-an-average-line-for-an-irregular-time-graph – Khiva

5 years later this is now part of Highcharts core offering within their Highstock product, no plugins needed! – Pliocene

Answer 1

As far as I am aware, highcharts does not calculate a regression or trend lines. There are some plugins that you may be able to use. Here is one that i've found, i'm sure there are others: https://github.com/virtualstaticvoid/highcharts_trendline

Haerle

Thank you for that. Will use it. However, I'm not sure why you think there would be more than one plug-in to do this. In fact, it seems VERY odd to me that it's not part of the Highcharts base. – Frightened

I don't believe that Highsoft Solutions AS (the company behind Highcharts JS) wrote that plugin. With that said, its very possible that other members of the community may have written their own solutions for doing this. The maintainer of the linked repo (Chris Stefano) extracted code from jqplot.trendline.js for the regression.js. Which is why I would think that there is more than one way to go about it. Hopefully, this solution will work well for you. If this solved your question, please mark the thread solved. – Haerle

Actually, turns out that library is all broken and uses a bunch of deprecated junk. :( – Frightened

Well at least you are pointed in the right direction, and I believe I have answered your original question regarding highcharts providing trend lines (no, it doesn't). – Haerle

Take a look at this discussion. We are implementing only the most popular requests. Btw, some users just don't want extra indicators in code. I think that calculating indicators before plotting chart is good solution. – Pulido

I find it a better solution to calculate my own trend line. Highcharts is ot a stats package, and there are many ways to calculate trending - doing it yourself means you know what you're getting... – Homoousian

A straight line from the first to the last point sounds pretty straight-forward to me. I can't think of any other way it would be displayed. – Frightened

For you do it yourself-ers out there look at this answer: https://mcmap.net/q/1634925/-how-to-create-an-average-line-for-an-irregular-time-graph – Khiva

Answer 2

Highcharts does not support this out of the box, but there are some plugins in their gallery that do trend lines.

This one for example (which we have used with success), gives multiple options including linear trend and moving averages: http://www.highcharts.com/plugin-registry/single/16/technical-indicators

UPDATE May 2018:

Highcharts now includes this functionality as part of its core offering.

https://www.highcharts.com/docs/chart-and-series-types/technical-indicator-series

Pliocene

It's a broken link that can't find anything on highcharts. – Marcelline

@Jester, updated my answer with information that it's core to Highcarts core offering now – Pliocene

This doesn't seem to be Highcharts, but Highstock. They're under different products. – Foregoing

Answer 3

Since Highcharts Stock v7, trendline is officially supported.

More details can be found in API.

Demo: https://jsfiddle.net/BlackLabel/bd8gc1ya/

Basic config:

{
  type: 'trendline',
  linkedTo: 'aapl',
  marker: {
    enabled: false
  }
}

Giagiacamo

Answer 4

HighCharts have trend line feature. check https://www.highcharts.com/products/plugin-registry/single/22/Highcharts%20regression

check this JSFiddle also http://jsfiddle.net/3g4ryLc9/539/

 series: [{
  regression: true,
  regressionSettings: {
    name : 'Type any name of the series..',
    type: 'polynomial',
    color: 'rgba(223, 183, 83, .9)',
    dashStyle: 'solid'
  },
  name: 'Test input',
  color: 'rgba(223, 83, 83, .5)',
  data: [
    [1, 1],
    [2, 3],
    [3, 9],

  ]

Cicala

Note that this isn't something built in, but instead depends on a third-party library, as we can see from the tag in the fiddle: <script src="//rawgithub.com/phpepe/highcharts-regression/master/highcharts-regression.js?8"> – Banuelos