packed bubble?

[Raphael Chancey]

Is packed bubble supported? I can get radar and stock and bars and lines and even regular bubble.. but the packed bubble blows up on error 17..

loading liks this:

`import React, { Component } from 'react';

import ReactHighcharts from 'react-highcharts'
import HighchartsMore from 'highcharts/highcharts-more';
import HighchartsExporting from 'highcharts/modules/exporting';

HighchartsMore(ReactHighcharts.Highcharts);
HighchartsExporting(ReactHighcharts.Highcharts)

export class PackedBubble extends Component {

render() {
 
    var config = {
        chart: {
            type: 'packedbubble',
            height: '80%'
        },
        title: {
            text: 'Simple packed bubble'
        },
        subTitle: {
            text: 'Coffee consumption'
        },
        tooltip: {
            useHTML: true,
            pointFormat: '<b>{point.name}:</b> {point.y}</sub>'
        },
        plotOptions: {
            packedbubble: {
                dataLabels: {
                    enabled: true,
                    format: '{point.name}',
                    style: {
                        color: 'black',
                        textOutline: 'none',
                        fontWeight: 'normal'
                    }
                },
                minPointSize: 5
            }
        },
        series: [{
            name: 'Coffee',
            data: [{
                value: 12, name: 'Bert'
            }, {
              value: 5, name: 'Sam'
            }, {
              value: 10, name: 'John'
            }, {
                value: 7, name: 'Dick' 
            }]},{
                name: 'Energy drinks',
              data: [{
                  value: 10, name: 'Ma'
              }]
            }, {
                name: 'Tea',
              data: [5, 6, 8, {value: 10, name: 'Mustapha', color: 'pink'}]
            }]
    
    };

    let barChart = <ReactHighcharts config={config} ref="chart" />
    return (
        <div className="app">
            {barChart}
        </div>
    );
}

}

export default PackedBubble;`

and I get this exception:

[Error] Error: Highcharts error #17: www.highcharts.com/errors/17
error (bundle.js:78312:246)
initSeries (bundle.js:78552:421)
(anonymous function) (bundle.js:78577:144)
forEach
each (bundle.js:78331)
firstRender (bundle.js:78577:106)
(anonymous function) (bundle.js:78552:316)
fireEvent (bundle.js:78333:507)
init (bundle.js:78551:93)
getArgs (bundle.js:78551)
Chart (bundle.js:78550:330)
value (bundle.js:151651:2563)
value (bundle.js:151651:3127)
commitLifeCycles (bundle.js:141696)
commitAllLifeCycles (bundle.js:143098)
callCallback (bundle.js:124715)
dispatchEvent
invokeGuardedCallbackDev (bundle.js:124765)
invokeGuardedCallback (bundle.js:124822)
commitRoot (bundle.js:143310)
(anonymous function) (bundle.js:144780)
unstable_runWithPriority (bundle.js:158608)
completeRoot (bundle.js:144779)
performWorkOnRoot (bundle.js:144708)
performWork (bundle.js:144616)
performSyncWork (bundle.js:144590)
interactiveUpdates$1 (bundle.js:144857)
dispatchInteractiveEvent (bundle.js:129448)
dispatchInteractiveEvent
[Error] TypeError: undefined is not an object (evaluating 'this.chart.destroy')
value (bundle.js:151651:3204)
callComponentWillUnmountWithTimer (bundle.js:141531)
callCallback (bundle.js:124715)
dispatchEvent
invokeGuardedCallbackDev (bundle.js:124765)
invokeGuardedCallback (bundle.js:124822)
safelyCallComponentWillUnmount (bundle.js:141538)
commitUnmount (bundle.js:141915)
commitNestedUnmounts (bundle.js:141946)
unmountHostComponents (bundle.js:142207)
commitDeletion (bundle.js:142266)
commitAllHostEffects (bundle.js:143047)
callCallback (bundle.js:124715)
dispatchEvent
invokeGuardedCallbackDev (bundle.js:124765)
invokeGuardedCallback (bundle.js:124822)
commitRoot (bundle.js:143275)
(anonymous function) (bundle.js:144780)
unstable_runWithPriority (bundle.js:158608)
completeRoot (bundle.js:144779)
performWorkOnRoot (bundle.js:144708)
performWork (bundle.js:144616)
performSyncWork (bundle.js:144590)
interactiveUpdates$1 (bundle.js:144857)
dispatchInteractiveEvent (bundle.js:129448)
dispatchInteractiveEvent

any ideas why it does not understand the 'packed bubble' type ?.. help would be GREATLY appreciated

[Shane Korin]

I managed to get this working by manually loading the new version of highcharts and passing it in to ReactHighcharts at startup.

If you remove any references in your package to highcharts, then:

yarn add highcharts@latest / npm i --save highcharts@latest

And then when you set up the ReactHighcharts stuff, I did this:

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

const ReactHighcharts = require('react-highcharts').withHighcharts(Highcharts);
console.log(ReactHighcharts.Highcharts.version); // should be 7.1.1
HighchartsMore(ReactHighcharts.Highcharts);

This won't be required when the author updates the dependency in the package to the latest but it seems to be working for now.

[Kirill Cherkashin]

Closing, as this seems to be resolved, we're working on updating HC to v7