0

I want to make all/some charts in my React project to use a different instance of Highcharts. I will be extending some functions in some of the charts, but I don't want the extension to affect all charts, so I would like to use a different Highcharts extension for these charts.

How can I do that?

I'm using highcharts and highcharts-react-official libraries.

Yahya Fati
  • 135
  • 3
  • 12

1 Answers1

1

The cheapest option seems to be adding a simple if check and run modification only if it is related to a specific chart/series. For example:

(function (H) {
  H.wrap(H.seriesTypes.line.prototype, "getColor", function (proceed) {
    if (this.options.id !== "seriesOne") {
      return proceed.apply(this, Array.prototype.slice.call(arguments, 1));
    }
    this.color = "red";
  });
})(Highcharts);

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

You can also deep copy an imported Highcharts object or use aliases to install and import two different instances, but it seems to be overkill.

ppotaczek
  • 36,341
  • 2
  • 14
  • 24