CODEWITHSUNDEEP
javascriptreactjshighchartsreact-highcharts
Bernardo Marques
Bernardo Marques

Reputation: 1055

Costumize indicators from stock tools

I'm trying to implement some technical indicators series and add them to the indicators popop from stock tools. If I import highcharts/indicators/indicators-all I end up getting dozens of indicators, so I figured to import only the ones I need, so far I wasn't able to achieve that, if I import highcharts/indicators/indicators I end up getting only SMA, I tried to import other technical indicators via highcharts/indicators/indicators-INDICATOR-NAME but it didn't work.

Besides that I'd like to create a technical indicator/function such as Linear Regression (from this example) and attach them to the indicators popup as well.

function getLinearRegression(xData, yData) {
  var sumX = 0,
    sumY = 0,
    sumXY = 0,
    sumX2 = 0,
    linearData = [],
    linearXData = [],
    linearYData = [],
    n = xData.length,
    alpha,
    beta,
    i,
    x,
    y;

  // Get sums:
  for (i = 0; i < n; i++) {
    x = xData[i];
    y = yData[i];
    sumX += x;
    sumY += y;
    sumXY += x * y;
    sumX2 += x * x;
  }

  // Get slope and offset:
  alpha = (n * sumXY - sumX * sumY) / (n * sumX2 - sumX * sumX);
  if (isNaN(alpha)) {
    alpha = 0;
  }
  beta = (sumY - alpha * sumX) / n;

  // Calculate linear regression:
  for (i = 0; i < n; i++) {
    x = xData[i];
    y = alpha * x + beta;

    // Prepare arrays required for getValues() method
    linearData[i] = [x, y];
    linearXData[i] = x;
    linearYData[i] = y;
  }

  return {
    xData: linearXData,
    yData: linearYData,
    values: linearData
  };
}

Is that even possible?

Live Demo

EDIT

To add a specific technical indicator you should add as an import highcharts/indicators/NAME (highcharts/indicators/ema, highcharts/indicators/rsi e.g.)

Upvotes: 1

Views: 290

Answers (1)

ppotaczek
ppotaczek

Reputation: 39139

That feature is not implemented in stock tools, but it could be very useful so you can create a new feature request here: https://github.com/highcharts/highcharts/issues/new/choose

Workaround:

All indicator series from plot options are added to stock tools, so you can customize chart.options.plotOptions, for example in load event:

chart: {
  events: {
    load: function() {
      var plotOptions = this.options.plotOptions,
        filteredSeries = {};

      Highcharts.objectEach(plotOptions, function(option, key) {
        if (!option.params || key === 'dema' || key === 'customlinearregression') {
          filteredSeries[key] = option;
        }
      });

      this.options.plotOptions = filteredSeries;
    }
  }
}

Live demo: https://jsfiddle.net/BlackLabel/xwec9hr7/2/

Useful example: https://www.highcharts.com/stock/demo/stock-tools-custom-gui

Code reference: https://github.com/highcharts/highcharts/blob/371424be0b168de96aa6a58b81ce0b2b7f40d5c5/ts/annotations/popup.ts#L783

Upvotes: 1

Related Questions