Having trouble with highcharts-more

[lmaccherone]

I've tried every possible combination of imports that I can think of but no luck. Here is what I think should work:

import Highcharts from 'highcharts-release/highcharts.src.js';
import 'highcharts-release/highcharts-more.src.js';
import 'highcharts-release/modules/exporting.src.js';
import ReactHighcharts from 'react-highcharts';

[lmaccherone]

I knew as soon as I asked, I would figure it out. This worked for me:

import ReactHighcharts from 'react-highcharts/bundle/highcharts';
import 'highcharts-exporting';
import 'highcharts-more';

It meant that I had to separately npm install highcharts-exporting and highcharts-more

[martin-svk]

Hey I have a similar problem. I want to use highcharts-more to display solidgauge graph.
If I separately install highcharts-exporting and highcharts-more and import it like @lmaccherone I get error: HighchartsAdapter is not defined.

What is the preffered way to get the highcharts-more working. Thanks

[kirjs]

Are you sure you're using the latest version of highcharts?

[lmaccherone]

@martin-svk, did you try npm install highcharts-exporting and npm install highcharts-more and use the imports I show above?

[martin-svk]

@kirjs Yes I think I am. (version 4.2.1). But I am importing the bundled highcharts in react-highcharts.

I also tried to import highcharts separetaly from react-highcharts like this:

import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';

but got Highcharts is not bundled by default. use "react-highcharts/dist/bundle/highcharts" instead, or include highcharts. error.

@lmaccherone Yes, I did exactly this:

import ReactHighcharts from 'react-highcharts/bundle/highcharts';
import 'highcharts-exporting';
import 'highcharts-more';

and got HighchartsAdapter is not defined error.

[kirjs]

What if you try using non-bundled version?

[martin-svk]

@kirjs As I wrote, I tried to use non-bundled Highcharts:

import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';

but got Highcharts is not bundled by default. use "react-highcharts/dist/bundle/highcharts" instead, or include highcharts. error.

[kirjs]

ReachHighcharts expects global Highcharts variable, can you try setting it explicitly?

[martin-svk]

Hi, it seems to not work with ES6 import but I managed to get rid of Highcharts is not bundled by default... message with this:

global.Highcharts = require('highcharts');
const ReactHighcharts = require('react-highcharts'); // This works

For information, I can't even combine the imports like this:

global.Highcharts = require('highcharts');
import ReactHighcharts from 'react-highcharts'; // This does not work

But that still does not solve my problem (which is to import highcharts-more to be able to use solidgauge graph). I tried:

global.Highcharts = require('highcharts');
global.HighchartsMore = require('highcharts-more');
const ReactHighcharts = require('react-highcharts');

Which don't produce any error but still throwing The requested series type does not exist Highcharts error 17. Then I tried also require highcharts-exporing:

global.Highcharts = require('highcharts');
global.HighchartsMore = require('highcharts-more');
global.HighchartsExporting = require('highcharts-exporting');
const ReactHighcharts = require('react-highcharts');

But that fails with HighchartsAdapter is not defined error.

[kirjs]

This seems to be more about the modules, I created an issue in another repository: kirjs/publish-highcharts-modules#3

[johnarrr]

@lmaccherone and anyone else who comes along later -- this seems to work (with webpack, at least):

import ReactHighcharts from 'react-highcharts/dist/bundle/highcharts'
import HighchartsMore from 'highcharts-more'
HighchartsMore(Highcharts)

Using the ReactHighcharts bundle automatically adds Highcharts.

[lmaccherone]

Thanks John. This is working for me:

ReactHighcharts = require('react-highcharts/bundle/highcharts')
require('highcharts-exporting')
require('highcharts-more')

On Mon, Jan 25, 2016 at 1:48 PM John Reuning notifications@github.com
wrote:

@lmaccherone https://github.com/lmaccherone and anyone else who comes
along later -- this seems to work (with webpack, at least):

import ReactHighcharts from 'react-highcharts/dist/bundle/highcharts'import HighchartsMore from 'highcharts-more'HighchartsMore(Highcharts)

Using the ReactHighcharts bundle automatically adds Highcharts.

—
Reply to this email directly or view it on GitHub
#72 (comment)
.

[laopunk]

For what it's worth, this solution works for me:

HighchartsMore = require('highcharts-more')(ReactHighcharts.Highcharts)

[thanasis00]

For what it's worth, this solution works for me:

HighchartsMore = require('highcharts-more')(ReactHighcharts.Highcharts)

Thank you for this answer. It worked for me, too.

[surmistry]

Here's a VERY clear example of a fully working react app and highcharts-more integration into a component 🎉 🔥 💯 https://kirjs.github.io/react-highcharts/more.html

[kenkotch]

Has anyone been able to implement highcharts-more into react-native?

[Sunzhuoyi]

import * as ReactHighcharts from "react-highcharts"; <br/> import * as HighchartsMore from "highcharts/highcharts-more"; <br/> HighchartsMore(ReactHighcharts.Highcharts);

this way worked for me