Unable to load the Packed bubble chart of highcharts

Question

I'm encountering an issue with rendering the PackedBubbleChart component in my React TypeScript application. When attempting to load the page, it breaks with a console error, and I'm seeking guidance on resolving this issue.

Details:

Highcharts version: 11.4.0 React Highcharts version: 16.1.0 Additional modules: highcharts-more, highcharts/modules/exporting, highcharts/modules/accessibility, highcharts/modules/annotations

Issue: When attempting to load the page, I encounter the following error in the console. I've ensured that all dependencies are correctly installed and imported. Could someone provide guidance on how to resolve this issue? I am using "highcharts": "^11.4.0", "react-highcharts": "^16.1.0","highcharts-more": "^0.1.7".

Component:

import React from 'react';
import Highcharts from 'highcharts';
import ReactHighcharts from 'react-highcharts';
import HC_more from 'highcharts/highcharts-more';
import Exporting from 'highcharts/modules/exporting';
import Accessible from 'highcharts/modules/accessibility';
import AnnotationsChart from 'highcharts/modules/annotations';

// Initialize Highcharts More module
HC_more(Highcharts); 
Exporting(Highcharts);
Accessible(Highcharts);
AnnotationsChart(Highcharts);

const PackedBubbleChart = () => {
  const config: Highcharts.Options = {
    chart: {
      type: 'packedbubble',
      height: '100%'
    },
    title: {
      text: 'Simple Bar Chart'
    },
    tooltip: {
      useHTML: true,
      pointFormat: '<b>{point.name}:</b> {point.value}m CO<sub>2</sub>'
    },
    plotOptions: {
      packedbubble: {
        minSize: '30%',
        maxSize: '120%',
        layoutAlgorithm: {
          splitSeries: false,
          gravitationalConstant: 0.02
        },
        dataLabels: {
          enabled: true,
          format: '{point.name}',
          filter: {
            property: 'y',
            operator: '>',
            value: 250
          },
          style: {
            color: 'black',
            textOutline: 'none',
            fontWeight: 'normal'
          }
        }
      }
    },
    series: [{
      name: 'Asia',
      type: 'packedbubble',
      data: [{
        name: 'Nepal',
        value: 6.5
      },
      {
        name: 'Iran',
        value: 6.2
      },
      {
        name: 'Korea',
        value: 6.1
      }]
    }]
  };

  return <ReactHighcharts config={config} />;
};

export default PackedBubbleChart;

Using it in other component like:

<PackedBubbleChart/>

Error:

```Uncaught Error: Highcharts error #17: www.highcharts.com/errors/17
    at a.error (highcharts.js:12:237)
    at a.Chart.initSeries (highcharts.js:252:415)
    at eval (highcharts.js:277:133)
    at Array.forEach (<anonymous>)
    at a.each (highcharts.js:31:26)
    at a.Chart.firstRender (highcharts.js:277:104)
    at a.Chart.eval (highcharts.js:252:304)
    at a.fireEvent (highcharts.js:33:502)
    at a.Chart.init (highcharts.js:251:91)
    at a.Chart.getArgs (highcharts.js:251:16)
ReactHighcharts.js:1 Uncaught TypeError: Cannot read properties of undefined (reading 'destroy')
    at n.value (ReactHighcharts.js:1:3070)
    at n.value (react-hot-loader.development.js:707:1)
    at callComponentWillUnmountWithTimer (react-dom.development.js:19582:12)
    at HTMLUnknownElement.callCallback (react-dom.development.js:190:14)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:239:16)
    at invokeGuardedCallback (react-dom.development.js:294:31)
    at safelyCallComponentWillUnmount (react-dom.development.js:19589:5)
    at commitUnmount (react-dom.development.js:20111:11)
    at commitNestedUnmounts (react-dom.development.js:20165:5)
    at unmountHostComponents (react-dom.development.js:20445:7)```

Answer 1

When using additional modules or plugins with Highcharts, it's important to initialize and extend the Highcharts instance directly as demonstrated below. This ensures that all extended features and functionalities of the modules or plugins are correctly applied and available for use in your charts:

return <ReactHighcharts highcharts={Highcharts} config={config} />;