How do i use highcharts and highstock on the same page? about react-highcharts

[mspe87]

I had been struggling with this issue all day, and 5 minutes after posting my issue i found the solution.
For other who might have the same problem, the solution is to us bundled version of highstock and non bundled version of highcharts. The non bundled version, expects highcharts to already be loaded

var Highstocks = require('react-highcharts/dist/bundle/highstock');
var Highcharts = require('react-highcharts');

[kirjs]

Thanks Mads, feel free to PR a readme update if you feel this info belongs there.

[joshhornby]

@mspe87 Thanks for this, although I seem to get this error

Error: Starting with version 3 of react-highcharts, Highcharts is not bundled by default. use "react-highcharts/bundle/highcharts" instead, or include highcharts

[mspe87]

@joshhornby That was the same problem i had. You need to use it like this:

var Highstocks = require('react-highcharts/dist/bundle/highstock');
var Highcharts = require('react-highcharts');

And not like this:

var Highstock = require('react-highcharts/dist/bundle/highstock');
var Highcharts = require('react-highcharts/dist/bundle/highcharts');

[joshhornby]

@mspe87 I was doing that, I have re-run my build and the errors seem to have code away. But of been webpack playing up!

[joshhornby]

@mspe87 I can actually confirm that this isn't a webpack caching issue. I still get the error when using the packages like you stated.

[kirjs]

Which version are you using?
I got rid of the dist part in the latest version

[joshhornby]

I am using version 5.0.2. I still see the dist directory in my node modules

[kirjs]

Can you show me how exactly your code looks like?

[joshhornby]

Highchart

render() {

      let Highcharts = require('react-highcharts');
      Highcharts.Highcharts.setOptions({
        global: {
            useUTC: false
        }
      });

      return (
        <div>
          <Highcharts config={this.props.chartData} />
        </div>
      );
    };

Highstock

  render() {

      let Highstock = require('react-highcharts/dist/bundle/highstock');
      Highstock.Highcharts.setOptions({
        global: {
            useUTC: false
        }
      });

      return (
        <div>
          <Highstock config={this.props.chartData} />
        </div>
      );
    };

}

[kirjs]

That was fast. Which exact error do you get?
What's the stack trace?

[joshhornby]

The odd thing is I don't get the error on every render.

[kirjs]

I think the case here is that require('react-highcharts/dist/bundle/highstock'); should be required before require('react-highcharts');, because it's the one who's getting the Highcharts in the code base.

Also try getting rid of the dist part, it should work without it.

[joshhornby]

How would this work with two separate files though? This might explain why it sometimes errors and one chart may load before another?

[kirjs]

Do require('react-highcharts/dist/bundle/highstock'); somewhere on the top level of the app.
That should fix it.

[joshhornby]

Doing this throws Highcharts error #16: www.highcharts.com/errors/16

[kirjs]

Use non-bundled highstock in Highstock file

[joshhornby]

So require('react-highcharts/highstock');

[kirjs]

Yes, not on top level, but in highstock file

[joshhornby]

Adding const Highcharts = require('react-highcharts/bundle/highstock'); at the top of the file seems to have fixed this. Thanks for the help @kirjs I will continue testing tomorrow. Can we leave this issue open for next 24 hours until I can 100% confirm its fixed? If so I will PR the docs.

[kirjs]

Sure, this seems like a good place for the docs.

Also this makes me want to get rid of bundles and just better document including highcharts release in the bundle in the future.

[kirjs]

I'll close it, feel free to reopen if needed