Old version in highcharts-more

[mikeprince3]

The highcharts-more package is an old version (4.2.3) of the file that doesn't match well with the most recent and official highcharts package (5.0.9 via @TorsteinHonsi). It may work well for many things but it didn't work for me with the columnrange series.

Keeping this up to date may be difficult over time so maybe the example should reference the "more" file that comes with the official package. I am by no means a js expert but this worked for me:

require('highcharts/js/highcharts-more')(ReactHighcharts.Highcharts);

Maybe consider deleting the highcharts-more package or keep it up to date.

[stinsavo]

Yes, boxplot does not work either.

[zyMacro]

do you mean

var ReactHighcharts = require('react-highcharts');
var HighchartsMore = require('highcharts-more');
HighchartsMore(ReactHighcharts.Highcharts);
var HighchartsExporting = require('highcharts-exporting');
HighchartsExporting(ReactHighcharts.Highcharts);
require('highcharts/js/highcharts-more')(ReactHighcharts.Highcharts);

I can't deal with it.Can you tell me the header code?

[mikeprince3]

@zyMacro , I'm not 100% sure what you are asking for, but this is what I am using for my chart component:

import React from 'react' import Highcharts from 'highcharts'; import ReactHighcharts from 'react-highcharts'; require('highcharts/js/highcharts-more')(ReactHighcharts.Highcharts);

Essentially, the 'highcharts-more' package is out of date so use the highcharts-more from the official Highcharts package instead.

[zyMacro]

@mikeprince3 Thank you . I have solved this problem by added below code inspired by you. require('highcharts/modules/solid-gauge.js')(ReactHighcharts.Highcharts);

[frontend-3]

Hi guys! If you are still figuring out how you can solve it. Here is a code that can help you:

import React from 'react'
import Highcharts from 'highcharts';
import NoDataToDisplay from 'highcharts/modules/no-data-to-display';

NoDataToDisplay(ReactHighcharts.Highcharts); // Or you can place it in componentDidMount

I'm going to send a PR related to update the readme. Hope this help.

[hhoughgg]

To get this to work for a treemap I had to do

import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
require('highcharts/js/highcharts-more.js')(ReactHighcharts.Highcharts);
require('highcharts/modules/treemap.js')(ReactHighcharts.Highcharts);

If I didn't have both requires it was not working.

[riseremi]

Same problem. Polar chart with empty data doesn't work. I've found a fix in the main highcharts repo: https://github.com/highcharts/highcharts/issues/5226

Thank you @mikeprince3, this worked for me:

import HighchartsMore from 'highcharts/js/highcharts-more';

HighchartsMore(ReactHighcharts.Highcharts);