How to add a regression line to line chart when i use data source as JSON - Highcharts.js react

Question

im currently struggling to create a trend line to a line chart. found some old solutions and those things didn't work for me.

Current code(Json file):

[
{
    "key": "003",
    "title": "Detections",
    "type": "chart",
    "chartData": {
        "chart": {
            "type": "line",
            "renderTo": "container"
        },
        "title": {
            "text": ""
        },
        "subtitle": {
            "text": ""
        },
    
        
        
        "xAxis": {
            "categories": ["Jan 7", "Jan 14", "Jan 21", "Jan 28",
        "Feb 4","Feb 11","Feb 18","Feb 25",
        "Mar 4","Mar 11","Mar 18","Mar 28",
        "Apr 1","Apr 8","Apr 15","Apr 22","Apr 29",
        "May 6","May 13","May 20","May 27"
        
        
        ]
        },

        
        "colors": [ "#f89c1b"],

        "yAxis": {
            "title": {
                "text": "Number of Exits"
            }
        },
        "plotOptions": {
            "line": {
                "dataLabels": {
                    "enabled": true
                },
                "enableMouseTracking": false
            }
        },
        "series": [{
            "name": "Week",
            "data": [60,12,29,48,
            24,31,15,37,
            32,16,22,29,
            21,13,9,14,15,
            10,12,13,7]
        }
    ]
        

    },
    "index": 2,
    "defaultWidth": "100%"
}
]

Current chart:

enter image description here

How do i add a regression line to this?

i found this link and it shows to add regression line in JS.But is there a way to do this using JSON?

Answer 1

Similar as for other indicators, you need to load and initialize proper modules (indicators and regressions in this case):

// Import Highcharts
import Highcharts from "highcharts/highstock";
import indicators from "highcharts/indicators/indicators";
import regressions from "highcharts/indicators/regressions";

indicators(Highcharts);
regressions(Highcharts);

And add new trendline series:

series: [
  {
    id: "mainSeries",
    name: "Week",
    data: [...]
  },
  {
    type: "linearRegression",
    linkedTo: "mainSeries"
  }
]

---

Live demo: https://codesandbox.io/s/highcharts-react-demo-fork-vjni21?file=/demo.jsx

API Reference: https://api.highcharts.com/highstock/series.linearregression